@lobehub/ui 6.0.0-beta.1 → 6.0.0-beta.11

package/es/CodeDiff/DiffPanel.mjs

@@ -6,10 +6,10 @@ import Text from "../Text/Text.mjs";
 import MaterialFileTypeIcon from "../MaterialFileTypeIcon/MaterialFileTypeIcon.mjs";
 import Tag from "../Tag/Tag.mjs";
 import { stopPropagation } from "../utils/dom.mjs";
-import { compactActionsCls, compactLangCls, prefix, styles, variantStyles } from "./style.mjs";
+import { compactActionsCls, prefix, styles, variantStyles } from "./style.mjs";
 import { memo, useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { ChevronDown, ChevronRight } from "lucide-react";
 //#region src/CodeDiff/DiffPanel.tsx
@@ -23,7 +23,7 @@ const DiffPanel = memo(({ actions, body, className, classNames, dataCodeType, de
 		"data-code-type": dataCodeType,
 		width: "100%",
 		...rest,
-		...styleProps(rootStyles, clsx(prefix, className), rest.style),
+		...styleProps(rootStyles, clsx$1(prefix, className), rest.style),
 		children: [
 			/* @__PURE__ */ jsx(FlexBasic_default, {
 				horizontal: true,
@@ -34,7 +34,7 @@ const DiffPanel = memo(({ actions, body, className, classNames, dataCodeType, de
 				children: actions
 			}),
 			showHeader && /* @__PURE__ */ jsx(Tag, {
-				className: compactLangCls,
+				className: "lobe-code-diff-lang",
 				children: displayName
 			}),
 			/* @__PURE__ */ jsx("div", {
@@ -47,7 +47,7 @@ const DiffPanel = memo(({ actions, body, className, classNames, dataCodeType, de
 		"data-code-type": dataCodeType,
 		width: "100%",
 		...rest,
-		...styleProps(rootStyles, clsx(prefix, className), rest.style),
+		...styleProps(rootStyles, clsx$1(prefix, className), rest.style),
 		children: [showHeader && /* @__PURE__ */ jsxs(FlexBasic_default, {
 			horizontal: true,
 			align: "center",
@@ -116,7 +116,7 @@ const DiffPanel = memo(({ actions, body, className, classNames, dataCodeType, de
 				!expand && styles.bodyCollapsed,
 				styles.body,
 				showHeader && variant !== "borderless" && styles.bodyDivider
-			], clsx(`${prefix}-body`, classNames?.body), customStyles?.body),
+			], clsx$1(`${prefix}-body`, classNames?.body), customStyles?.body),
 			children: body
 		})]
 	});

package/es/CodeDiff/DiffPanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DiffPanel.mjs","names":["Flexbox"],"sources":["../../src/CodeDiff/DiffPanel.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { memo, useCallback, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport type { FlexboxProps } from '@/Flex';\nimport { Flexbox } from '@/Flex';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport { styleProps } from '@/styles/stylex/props';\nimport Tag from '@/Tag';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport { compactActionsCls, compactLangCls, prefix, styles, variantStyles } from './style';\n\ninterface DiffPanelProps extends Omit<FlexboxProps, 'children'> {\n  actions?: ReactNode;\n  additions: number;\n  body: ReactNode;\n  classNames?: {\n    body?: string;\n    header?: string;\n  };\n  dataCodeType: string;\n  defaultExpand?: boolean;\n  deletions: number;\n  displayName: string;\n  fileName?: string;\n  fullFeatured?: boolean;\n  showHeader?: boolean;\n  styles?: {\n    body?: CSSProperties;\n    header?: CSSProperties;\n  };\n  variant?: 'filled' | 'outlined' | 'borderless';\n}\n\nexport const DiffPanel = memo<DiffPanelProps>(\n  ({\n    actions,\n    body,\n    className,\n    classNames,\n    dataCodeType,\n    defaultExpand = true,\n    deletions,\n    displayName,\n    fileName,\n    fullFeatured = true,\n    showHeader = true,\n    styles: customStyles,\n    variant = 'filled',\n    additions,\n    ...rest\n  }) => {\n    const [expand, setExpand] = useState(defaultExpand);\n    const rootStyles = [styles.root, variantStyles[variant]];\n\n    const handleToggleExpand = useCallback(() => {\n      setExpand((prev) => !prev);\n    }, []);\n\n    if (!fullFeatured)\n      return (\n        <Flexbox\n          data-code-type={dataCodeType}\n          width={'100%'}\n          {...rest}\n          {...styleProps(rootStyles, clsx(prefix, className), rest.style)}\n        >\n          <Flexbox\n            horizontal\n            align=\"center\"\n            flex=\"none\"\n            gap={4}\n            {...styleProps(styles.actionsCompact, compactActionsCls)}\n          >\n            {actions}\n          </Flexbox>\n          {showHeader && <Tag className={compactLangCls}>{displayName}</Tag>}\n          <div {...styleProps(styles.body, classNames?.body, customStyles?.body)}>{body}</div>\n        </Flexbox>\n      );\n\n    return (\n      <Flexbox\n        data-code-type={dataCodeType}\n        width={'100%'}\n        {...rest}\n        {...styleProps(rootStyles, clsx(prefix, className), rest.style)}\n      >\n        {showHeader && (\n          <Flexbox\n            horizontal\n            align=\"center\"\n            gap={8}\n            justify=\"space-between\"\n            padding={4}\n            paddingInline={variant === 'borderless' ? 0 : undefined}\n            onClick={handleToggleExpand}\n            {...styleProps(\n              [styles.header, variant === 'filled' && styles.headerFilled],\n              classNames?.header,\n              customStyles?.header,\n            )}\n          >\n            <Flexbox\n              horizontal\n              align=\"center\"\n              className=\"language-title\"\n              flex={1}\n              gap={4}\n              justify=\"flex-start\"\n              paddingInline={8}\n            >\n              <MaterialFileTypeIcon\n                fallbackUnknownType={false}\n                filename={fileName || displayName}\n                size={18}\n                type=\"file\"\n                variant=\"raw\"\n              />\n              <Text ellipsis fontSize={13}>\n                {displayName}\n              </Text>\n            </Flexbox>\n            <Flexbox horizontal align=\"center\" flex=\"none\" gap={8} onClick={stopPropagation}>\n              {actions && (\n                <Flexbox\n                  horizontal\n                  align=\"center\"\n                  flex=\"none\"\n                  gap={4}\n                  {...styleProps(styles.actions, `panel-actions ${prefix}-actions`)}\n                >\n                  {actions}\n                </Flexbox>\n              )}\n              {(deletions > 0 || additions > 0) && (\n                <Flexbox horizontal align=\"center\" gap={8}>\n                  {deletions > 0 && <span {...stylex.props(styles.deletions)}>-{deletions}</span>}\n                  {additions > 0 && <span {...stylex.props(styles.additions)}>+{additions}</span>}\n                </Flexbox>\n              )}\n              <ActionIcon\n                icon={expand ? ChevronDown : ChevronRight}\n                size=\"small\"\n                onClick={handleToggleExpand}\n              />\n            </Flexbox>\n          </Flexbox>\n        )}\n        <div\n          {...styleProps(\n            [\n              styles.bodyRoot,\n              !expand && styles.bodyCollapsed,\n              styles.body,\n              showHeader && variant !== 'borderless' && styles.bodyDivider,\n            ],\n            clsx(`${prefix}-body`, classNames?.body),\n            customStyles?.body,\n          )}\n        >\n          {body}\n        </div>\n      </Flexbox>\n    );\n  },\n);\n\nDiffPanel.displayName = 'DiffPanel';\n"],"mappings":"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"}
+{"version":3,"file":"DiffPanel.mjs","names":["Flexbox","clsx"],"sources":["../../src/CodeDiff/DiffPanel.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { memo, useCallback, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport type { FlexboxProps } from '@/Flex';\nimport { Flexbox } from '@/Flex';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport { styleProps } from '@/styles/stylex/props';\nimport Tag from '@/Tag';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport { compactActionsCls, compactLangCls, prefix, styles, variantStyles } from './style';\n\ninterface DiffPanelProps extends Omit<FlexboxProps, 'children'> {\n  actions?: ReactNode;\n  additions: number;\n  body: ReactNode;\n  classNames?: {\n    body?: string;\n    header?: string;\n  };\n  dataCodeType: string;\n  defaultExpand?: boolean;\n  deletions: number;\n  displayName: string;\n  fileName?: string;\n  fullFeatured?: boolean;\n  showHeader?: boolean;\n  styles?: {\n    body?: CSSProperties;\n    header?: CSSProperties;\n  };\n  variant?: 'filled' | 'outlined' | 'borderless';\n}\n\nexport const DiffPanel = memo<DiffPanelProps>(\n  ({\n    actions,\n    body,\n    className,\n    classNames,\n    dataCodeType,\n    defaultExpand = true,\n    deletions,\n    displayName,\n    fileName,\n    fullFeatured = true,\n    showHeader = true,\n    styles: customStyles,\n    variant = 'filled',\n    additions,\n    ...rest\n  }) => {\n    const [expand, setExpand] = useState(defaultExpand);\n    const rootStyles = [styles.root, variantStyles[variant]];\n\n    const handleToggleExpand = useCallback(() => {\n      setExpand((prev) => !prev);\n    }, []);\n\n    if (!fullFeatured)\n      return (\n        <Flexbox\n          data-code-type={dataCodeType}\n          width={'100%'}\n          {...rest}\n          {...styleProps(rootStyles, clsx(prefix, className), rest.style)}\n        >\n          <Flexbox\n            horizontal\n            align=\"center\"\n            flex=\"none\"\n            gap={4}\n            {...styleProps(styles.actionsCompact, compactActionsCls)}\n          >\n            {actions}\n          </Flexbox>\n          {showHeader && <Tag className={compactLangCls}>{displayName}</Tag>}\n          <div {...styleProps(styles.body, classNames?.body, customStyles?.body)}>{body}</div>\n        </Flexbox>\n      );\n\n    return (\n      <Flexbox\n        data-code-type={dataCodeType}\n        width={'100%'}\n        {...rest}\n        {...styleProps(rootStyles, clsx(prefix, className), rest.style)}\n      >\n        {showHeader && (\n          <Flexbox\n            horizontal\n            align=\"center\"\n            gap={8}\n            justify=\"space-between\"\n            padding={4}\n            paddingInline={variant === 'borderless' ? 0 : undefined}\n            onClick={handleToggleExpand}\n            {...styleProps(\n              [styles.header, variant === 'filled' && styles.headerFilled],\n              classNames?.header,\n              customStyles?.header,\n            )}\n          >\n            <Flexbox\n              horizontal\n              align=\"center\"\n              className=\"language-title\"\n              flex={1}\n              gap={4}\n              justify=\"flex-start\"\n              paddingInline={8}\n            >\n              <MaterialFileTypeIcon\n                fallbackUnknownType={false}\n                filename={fileName || displayName}\n                size={18}\n                type=\"file\"\n                variant=\"raw\"\n              />\n              <Text ellipsis fontSize={13}>\n                {displayName}\n              </Text>\n            </Flexbox>\n            <Flexbox horizontal align=\"center\" flex=\"none\" gap={8} onClick={stopPropagation}>\n              {actions && (\n                <Flexbox\n                  horizontal\n                  align=\"center\"\n                  flex=\"none\"\n                  gap={4}\n                  {...styleProps(styles.actions, `panel-actions ${prefix}-actions`)}\n                >\n                  {actions}\n                </Flexbox>\n              )}\n              {(deletions > 0 || additions > 0) && (\n                <Flexbox horizontal align=\"center\" gap={8}>\n                  {deletions > 0 && <span {...stylex.props(styles.deletions)}>-{deletions}</span>}\n                  {additions > 0 && <span {...stylex.props(styles.additions)}>+{additions}</span>}\n                </Flexbox>\n              )}\n              <ActionIcon\n                icon={expand ? ChevronDown : ChevronRight}\n                size=\"small\"\n                onClick={handleToggleExpand}\n              />\n            </Flexbox>\n          </Flexbox>\n        )}\n        <div\n          {...styleProps(\n            [\n              styles.bodyRoot,\n              !expand && styles.bodyCollapsed,\n              styles.body,\n              showHeader && variant !== 'borderless' && styles.bodyDivider,\n            ],\n            clsx(`${prefix}-body`, classNames?.body),\n            customStyles?.body,\n          )}\n        >\n          {body}\n        </div>\n      </Flexbox>\n    );\n  },\n);\n\nDiffPanel.displayName = 'DiffPanel';\n"],"mappings":"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"}

package/es/CodeDiff/PatchDiff.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PatchDiff.mjs","names":["PatchDiff","PierrePatchDiff"],"sources":["../../src/CodeDiff/PatchDiff.tsx"],"sourcesContent":["'use client';\n\nimport type { FileDiffOptions } from '@pierre/diffs';\nimport { PatchDiff as PierrePatchDiff } from '@pierre/diffs/react';\nimport { memo, useMemo } from 'react';\n\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { DiffPanel } from './DiffPanel';\nimport { getLobeDiffOptions, registerLobeDiffThemes } from './theme';\nimport type { PatchDiffProps } from './type';\n\nregisterLobeDiffThemes();\n\nconst countPatchChanges = (patch: string): { additions: number; deletions: number } => {\n  const lines = patch.split('\\n');\n  let additions = 0;\n  let deletions = 0;\n\n  for (const line of lines) {\n    if (line.startsWith('+') && !line.startsWith('+++')) {\n      additions++;\n    } else if (line.startsWith('-') && !line.startsWith('---')) {\n      deletions++;\n    }\n  }\n\n  return { additions, deletions };\n};\n\nexport const PatchDiff = memo<PatchDiffProps>(\n  ({\n    patch,\n    language,\n    fileName,\n    viewMode = 'split',\n    showHeader = true,\n    defaultExpand = true,\n    fullFeatured = true,\n    variant = 'filled',\n    className,\n    classNames,\n    styles: customStyles,\n    actionsRender,\n    diffOptions,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n\n    const displayName = useMemo(() => {\n      if (fileName) return fileName;\n      // Try to extract filename from patch header\n      const match = patch.match(/^(?:-{3}|\\+{3})\\s+(?:a\\/|b\\/)?(.+?)(?:\\t|$)/m);\n      if (match?.[1]) return match[1];\n      if (language) return language;\n      return 'patch';\n    }, [fileName, patch, language]);\n\n    const { additions, deletions } = useMemo(() => countPatchChanges(patch), [patch]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return null;\n      return actionsRender({\n        originalNode: null,\n        patch,\n      });\n    }, [actionsRender, patch]);\n\n    const options = useMemo<FileDiffOptions<string>>(\n      () => getLobeDiffOptions({ diffOptions, isDarkMode, viewMode }),\n      [isDarkMode, viewMode, diffOptions],\n    );\n\n    return (\n      <DiffPanel\n        actions={actions}\n        additions={additions}\n        body={<PierrePatchDiff options={options} patch={patch} />}\n        className={className}\n        classNames={classNames}\n        dataCodeType=\"patch-diff\"\n        defaultExpand={defaultExpand}\n        deletions={deletions}\n        displayName={displayName}\n        fileName={fileName}\n        fullFeatured={fullFeatured}\n        showHeader={showHeader}\n        styles={customStyles}\n        variant={variant}\n        {...rest}\n      />\n    );\n  },\n);\n\nPatchDiff.displayName = 'PatchDiff';\n\nexport default PatchDiff;\n"],"mappings":";;;;;;;;AAYA,uBAAuB;AAEvB,MAAM,qBAAqB,UAA4D;CACrF,MAAM,QAAQ,MAAM,MAAM,IAAI;CAC9B,IAAI,YAAY;CAChB,IAAI,YAAY;CAEhB,KAAK,MAAM,QAAQ,OACjB,IAAI,KAAK,WAAW,GAAG,KAAK,CAAC,KAAK,WAAW,KAAK,GAChD;MACK,IAAI,KAAK,WAAW,GAAG,KAAK,CAAC,KAAK,WAAW,KAAK,GACvD;CAIJ,OAAO;EAAE;EAAW;CAAU;AAChC;AAEA,MAAaA,cAAY,MACtB,EACC,OACA,UACA,UACA,WAAW,SACX,aAAa,MACb,gBAAgB,MAChB,eAAe,MACf,UAAU,UACV,WACA,YACA,QAAQ,cACR,eACA,aACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CAEpC,MAAM,cAAc,cAAc;EAChC,IAAI,UAAU,OAAO;EAErB,MAAM,QAAQ,MAAM,MAAM,8CAA8C;EACxE,IAAI,QAAQ,IAAI,OAAO,MAAM;EAC7B,IAAI,UAAU,OAAO;EACrB,OAAO;CACT,GAAG;EAAC;EAAU;EAAO;CAAQ,CAAC;CAE9B,MAAM,EAAE,WAAW,cAAc,cAAc,kBAAkB,KAAK,GAAG,CAAC,KAAK,CAAC;CAEhF,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,eAAe,OAAO;EAC3B,OAAO,cAAc;GACnB,cAAc;GACd;EACF,CAAC;CACH,GAAG,CAAC,eAAe,KAAK,CAAC;CAEzB,MAAM,UAAU,cACR,mBAAmB;EAAE;EAAa;EAAY;CAAS,CAAC,GAC9D;EAAC;EAAY;EAAU;CAAW,CACpC;CAEA,OACE,oBAAC,WAAD;EACW;EACE;EACX,MAAM,oBAACC,WAAD;GAA0B;GAAgB;EAAQ,CAAA;EAC7C;EACC;EACZ,cAAa;EACE;EACJ;EACE;EACH;EACI;EACF;EACZ,QAAQ;EACC;EACT,GAAI;CACL,CAAA;AAEL,CACF;AAEA,YAAU,cAAc"}
+{"version":3,"file":"PatchDiff.mjs","names":["PatchDiff","PierrePatchDiff"],"sources":["../../src/CodeDiff/PatchDiff.tsx"],"sourcesContent":["'use client';\n\nimport type { FileDiffOptions } from '@pierre/diffs';\nimport { PatchDiff as PierrePatchDiff } from '@pierre/diffs/react';\nimport { memo, useMemo } from 'react';\n\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { DiffPanel } from './DiffPanel';\nimport { getLobeDiffOptions, registerLobeDiffThemes } from './theme';\nimport type { PatchDiffProps } from './type';\n\nregisterLobeDiffThemes();\n\nconst countPatchChanges = (patch: string): { additions: number; deletions: number } => {\n  const lines = patch.split('\\n');\n  let additions = 0;\n  let deletions = 0;\n\n  for (const line of lines) {\n    if (line.startsWith('+') && !line.startsWith('+++')) {\n      additions++;\n    } else if (line.startsWith('-') && !line.startsWith('---')) {\n      deletions++;\n    }\n  }\n\n  return { additions, deletions };\n};\n\nexport const PatchDiff = memo<PatchDiffProps>(\n  ({\n    patch,\n    language,\n    fileName,\n    viewMode = 'split',\n    showHeader = true,\n    defaultExpand = true,\n    fullFeatured = true,\n    variant = 'filled',\n    className,\n    classNames,\n    styles: customStyles,\n    actionsRender,\n    diffOptions,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n\n    const displayName = useMemo(() => {\n      if (fileName) return fileName;\n      // Try to extract filename from patch header\n      const match = patch.match(/^(?:-{3}|\\+{3})\\s+(?:a\\/|b\\/)?(.+?)(?:\\t|$)/m);\n      if (match?.[1]) return match[1];\n      if (language) return language;\n      return 'patch';\n    }, [fileName, patch, language]);\n\n    const { additions, deletions } = useMemo(() => countPatchChanges(patch), [patch]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return null;\n      return actionsRender({\n        originalNode: null,\n        patch,\n      });\n    }, [actionsRender, patch]);\n\n    const options = useMemo<FileDiffOptions<string, undefined>>(\n      () => getLobeDiffOptions({ diffOptions, isDarkMode, viewMode }),\n      [isDarkMode, viewMode, diffOptions],\n    );\n\n    return (\n      <DiffPanel\n        actions={actions}\n        additions={additions}\n        body={<PierrePatchDiff options={options} patch={patch} />}\n        className={className}\n        classNames={classNames}\n        dataCodeType=\"patch-diff\"\n        defaultExpand={defaultExpand}\n        deletions={deletions}\n        displayName={displayName}\n        fileName={fileName}\n        fullFeatured={fullFeatured}\n        showHeader={showHeader}\n        styles={customStyles}\n        variant={variant}\n        {...rest}\n      />\n    );\n  },\n);\n\nPatchDiff.displayName = 'PatchDiff';\n\nexport default PatchDiff;\n"],"mappings":";;;;;;;;AAYA,uBAAuB;AAEvB,MAAM,qBAAqB,UAA4D;CACrF,MAAM,QAAQ,MAAM,MAAM,IAAI;CAC9B,IAAI,YAAY;CAChB,IAAI,YAAY;CAEhB,KAAK,MAAM,QAAQ,OACjB,IAAI,KAAK,WAAW,GAAG,KAAK,CAAC,KAAK,WAAW,KAAK,GAChD;MACK,IAAI,KAAK,WAAW,GAAG,KAAK,CAAC,KAAK,WAAW,KAAK,GACvD;CAIJ,OAAO;EAAE;EAAW;CAAU;AAChC;AAEA,MAAaA,cAAY,MACtB,EACC,OACA,UACA,UACA,WAAW,SACX,aAAa,MACb,gBAAgB,MAChB,eAAe,MACf,UAAU,UACV,WACA,YACA,QAAQ,cACR,eACA,aACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CAEpC,MAAM,cAAc,cAAc;EAChC,IAAI,UAAU,OAAO;EAErB,MAAM,QAAQ,MAAM,MAAM,8CAA8C;EACxE,IAAI,QAAQ,IAAI,OAAO,MAAM;EAC7B,IAAI,UAAU,OAAO;EACrB,OAAO;CACT,GAAG;EAAC;EAAU;EAAO;CAAQ,CAAC;CAE9B,MAAM,EAAE,WAAW,cAAc,cAAc,kBAAkB,KAAK,GAAG,CAAC,KAAK,CAAC;CAEhF,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,eAAe,OAAO;EAC3B,OAAO,cAAc;GACnB,cAAc;GACd;EACF,CAAC;CACH,GAAG,CAAC,eAAe,KAAK,CAAC;CAEzB,MAAM,UAAU,cACR,mBAAmB;EAAE;EAAa;EAAY;CAAS,CAAC,GAC9D;EAAC;EAAY;EAAU;CAAW,CACpC;CAEA,OACE,oBAAC,WAAD;EACW;EACE;EACX,MAAM,oBAACC,WAAD;GAA0B;GAAgB;EAAQ,CAAA;EAC7C;EACC;EACZ,cAAa;EACE;EACJ;EACE;EACH;EACI;EACF;EACZ,QAAQ;EACC;EACT,GAAI;CACL,CAAA;AAEL,CACF;AAEA,YAAU,cAAc"}

package/es/CodeDiff/theme.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"theme.mjs","names":["lobeTheme"],"sources":["../../src/CodeDiff/theme.ts"],"sourcesContent":["import type { FileDiffOptions } from '@pierre/diffs';\nimport { registerCustomTheme, resolveTheme } from '@pierre/diffs';\n\nimport lobeTheme from '@/Highlighter/theme/lobe-theme';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport type { DiffViewMode } from './type';\n\nlet isLobeDiffThemeRegistered = false;\n\nexport const registerLobeDiffThemes = () => {\n  if (isLobeDiffThemeRegistered) return;\n\n  registerCustomTheme('lobe-theme', () => Promise.resolve(lobeTheme as any));\n  void resolveTheme('lobe-theme');\n\n  isLobeDiffThemeRegistered = true;\n};\n\nconst customSeparatorCSS = `\n  :host {\n    --diffs-dark-bg: transparent !important;\n    --diffs-light-bg: transparent !important;\n    --diffs-gap-fallback: 8px;\n    --diffs-added-light: ${cssVar.colorSuccessHover};\n    --diffs-added-dark: ${cssVar.colorSuccessBorderHover};\n    --diffs-modified-light: ${cssVar.colorInfoHover};\n    --diffs-modified-dark: ${cssVar.colorInfoBorderHover};\n    --diffs-deleted-light: ${cssVar.colorErrorHover};\n    --diffs-deleted-dark: ${cssVar.colorErrorBorderHover};\n  }\n\n  [data-gutter-buffer] {\n    opacity: 0.2 !important;\n  }\n\n  [data-code] {\n    padding-top: 0 !important;\n    padding-bottom: 0 !important;\n  }\n\n  [data-gutter] {\n    backdrop-filter: blur(16px) !important;\n  }\n`;\n\nexport const getLobeDiffOptions = ({\n  diffOptions,\n  isDarkMode,\n  viewMode,\n}: {\n  diffOptions?: FileDiffOptions<string>;\n  isDarkMode: boolean;\n  viewMode: DiffViewMode;\n}): FileDiffOptions<string> => ({\n  theme: {\n    dark: 'lobe-theme',\n    light: 'lobe-theme',\n  },\n  themeType: isDarkMode ? 'dark' : 'light',\n  diffStyle: viewMode,\n  disableFileHeader: true,\n  unsafeCSS: customSeparatorCSS,\n  ...diffOptions,\n});\n"],"mappings":";;;;AAQA,IAAI,4BAA4B;AAEhC,MAAa,+BAA+B;CAC1C,IAAI,2BAA2B;CAE/B,oBAAoB,oBAAoB,QAAQ,QAAQA,kBAAgB,CAAC;CACzE,aAAkB,YAAY;CAE9B,4BAA4B;AAC9B;AAEA,MAAM,qBAAqB;;;;;2BAKA,OAAO,kBAAkB;0BAC1B,OAAO,wBAAwB;8BAC3B,OAAO,eAAe;6BACvB,OAAO,qBAAqB;6BAC5B,OAAO,gBAAgB;4BACxB,OAAO,sBAAsB;;;;;;;;;;;;;;;;AAiBzD,MAAa,sBAAsB,EACjC,aACA,YACA,gBAK8B;CAC9B,OAAO;EACL,MAAM;EACN,OAAO;CACT;CACA,WAAW,aAAa,SAAS;CACjC,WAAW;CACX,mBAAmB;CACnB,WAAW;CACX,GAAG;AACL"}
+{"version":3,"file":"theme.mjs","names":["lobeTheme"],"sources":["../../src/CodeDiff/theme.ts"],"sourcesContent":["import type { FileDiffOptions } from '@pierre/diffs';\nimport { registerCustomTheme, resolveTheme } from '@pierre/diffs';\n\nimport lobeTheme from '@/Highlighter/theme/lobe-theme';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport type { DiffViewMode } from './type';\n\nlet isLobeDiffThemeRegistered = false;\n\nexport const registerLobeDiffThemes = () => {\n  if (isLobeDiffThemeRegistered) return;\n\n  registerCustomTheme('lobe-theme', () => Promise.resolve(lobeTheme as any));\n  void resolveTheme('lobe-theme');\n\n  isLobeDiffThemeRegistered = true;\n};\n\nconst customSeparatorCSS = `\n  :host {\n    --diffs-dark-bg: transparent !important;\n    --diffs-light-bg: transparent !important;\n    --diffs-gap-fallback: 8px;\n    --diffs-added-light: ${cssVar.colorSuccessHover};\n    --diffs-added-dark: ${cssVar.colorSuccessBorderHover};\n    --diffs-modified-light: ${cssVar.colorInfoHover};\n    --diffs-modified-dark: ${cssVar.colorInfoBorderHover};\n    --diffs-deleted-light: ${cssVar.colorErrorHover};\n    --diffs-deleted-dark: ${cssVar.colorErrorBorderHover};\n  }\n\n  [data-gutter-buffer] {\n    opacity: 0.2 !important;\n  }\n\n  [data-code] {\n    padding-top: 0 !important;\n    padding-bottom: 0 !important;\n  }\n\n  [data-gutter] {\n    backdrop-filter: blur(16px) !important;\n  }\n`;\n\nexport const getLobeDiffOptions = ({\n  diffOptions,\n  isDarkMode,\n  viewMode,\n}: {\n  diffOptions?: FileDiffOptions<string, undefined>;\n  isDarkMode: boolean;\n  viewMode: DiffViewMode;\n}): FileDiffOptions<string, undefined> => ({\n  theme: {\n    dark: 'lobe-theme',\n    light: 'lobe-theme',\n  },\n  themeType: isDarkMode ? 'dark' : 'light',\n  diffStyle: viewMode,\n  disableFileHeader: true,\n  unsafeCSS: customSeparatorCSS,\n  ...diffOptions,\n});\n"],"mappings":";;;;AAQA,IAAI,4BAA4B;AAEhC,MAAa,+BAA+B;CAC1C,IAAI,2BAA2B;CAE/B,oBAAoB,oBAAoB,QAAQ,QAAQA,kBAAgB,CAAC;CACzE,aAAkB,YAAY;CAE9B,4BAA4B;AAC9B;AAEA,MAAM,qBAAqB;;;;;2BAKA,OAAO,kBAAkB;0BAC1B,OAAO,wBAAwB;8BAC3B,OAAO,eAAe;6BACvB,OAAO,qBAAqB;6BAC5B,OAAO,gBAAgB;4BACxB,OAAO,sBAAsB;;;;;;;;;;;;;;;;AAiBzD,MAAa,sBAAsB,EACjC,aACA,YACA,gBAKyC;CACzC,OAAO;EACL,MAAM;EACN,OAAO;CACT;CACA,WAAW,aAAa,SAAS;CACjC,WAAW;CACX,mBAAmB;CACnB,WAAW;CACX,GAAG;AACL"}

package/es/CodeDiff/type.d.mts

@@ -28,7 +28,7 @@ export interface CodeDiffProps extends Omit<FlexboxProps, 'children'> {
   /**
    * Options for the diff component
    */
-  diffOptions?: FileDiffOptions<string>;
+  diffOptions?: FileDiffOptions<string, undefined>;
   /**
    * File name to display
    */
@@ -96,7 +96,7 @@ export interface PatchDiffProps extends Omit<FlexboxProps, 'children'> {
   /**
    * Options for the diff component
    */
-  diffOptions?: FileDiffOptions<string>;
+  diffOptions?: FileDiffOptions<string, undefined>;
   /**
    * File name to display (optional, extracted from patch if not provided)
    */

package/es/CodeEditor/CodeEditor.mjs

@@ -2,12 +2,12 @@
 import { styleProps } from "../styles/stylex/props.mjs";
 import { cssVar } from "../styles/stylex/cssVar.stylex.mjs";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
 import { SyntaxHighlighterImpl } from "../Highlighter/SyntaxHighlighter/index.mjs";
 import { styles, variantStyles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import useControlledState from "use-merge-value";
+import clsx$1 from "clsx";
 //#region src/CodeEditor/CodeEditor.tsx
 const CodeEditor = memo(({ autoFocus, classNames, styles: customStyles, defaultValue = "", onChange, placeholder = "", style, className, onValueChange, value, language = "markdown", variant = "borderless", width, height, flex, ref, ...rest }) => {
 	const [code, setCode] = useControlledState(defaultValue, {
@@ -19,16 +19,16 @@ const CodeEditor = memo(({ autoFocus, classNames, styles: customStyles, defaultV
 		flex,
 		height: height ?? "fit-content",
 		width: width ?? "100%",
-		...styleProps([styles.root, variantStyles[variant]], clsx("lobe-code-editor", variant === "borderless" && "lobe-code-editor-borderless", className), style),
+		...styleProps([styles.root, variantStyles[variant]], clsx$1("lobe-code-editor", variant === "borderless" && "lobe-code-editor-borderless", className), style),
 		children: [value ? /* @__PURE__ */ jsx(SyntaxHighlighterImpl, {
-			className: clsx("lobe-code-editor-highlight", classNames?.highlight),
+			className: clsx$1("lobe-code-editor-highlight", classNames?.highlight),
 			language,
 			style: customStyles?.highlight,
 			variant,
 			xstyle: styles.highlight,
 			children: value
 		}) : /* @__PURE__ */ jsx("pre", {
-			...styleProps(styles.highlight, clsx("lobe-code-editor-highlight", classNames?.highlight), { color: cssVar.colorTextDescription }),
+			...styleProps(styles.highlight, clsx$1("lobe-code-editor-highlight", classNames?.highlight), { color: cssVar.colorTextDescription }),
 			children: placeholder || " "
 		}), /* @__PURE__ */ jsx("textarea", {
 			autoCapitalize: "off",

package/es/CodeEditor/CodeEditor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.mjs","names":["useMergeState","Flexbox"],"sources":["../../src/CodeEditor/CodeEditor.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { Flexbox } from '@/Flex';\nimport { SyntaxHighlighterImpl } from '@/Highlighter/SyntaxHighlighter';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles, variantStyles } from './style';\nimport type { CodeEditorProps } from './type';\n\nconst CodeEditor = memo<CodeEditorProps>(\n  ({\n    autoFocus,\n    classNames,\n    styles: customStyles,\n    defaultValue = '',\n    onChange,\n    placeholder = '',\n    style,\n    className,\n    onValueChange,\n    value,\n    language = 'markdown',\n    variant = 'borderless',\n    width,\n    height,\n    flex,\n    ref,\n    ...rest\n  }) => {\n    const [code, setCode] = useMergeState(defaultValue, {\n      defaultValue,\n      onChange: onValueChange,\n      value,\n    });\n\n    return (\n      <Flexbox\n        flex={flex}\n        height={height ?? 'fit-content'}\n        width={width ?? '100%'}\n        {...styleProps(\n          [styles.root, variantStyles[variant]],\n          clsx(\n            'lobe-code-editor',\n            variant === 'borderless' && 'lobe-code-editor-borderless',\n            className,\n          ),\n          style,\n        )}\n      >\n        {value ? (\n          <SyntaxHighlighterImpl\n            className={clsx('lobe-code-editor-highlight', classNames?.highlight)}\n            language={language}\n            style={customStyles?.highlight}\n            variant={variant}\n            xstyle={styles.highlight}\n          >\n            {value}\n          </SyntaxHighlighterImpl>\n        ) : (\n          <pre\n            {...styleProps(\n              styles.highlight,\n              clsx('lobe-code-editor-highlight', classNames?.highlight),\n              {\n                color: cssVar.colorTextDescription,\n              },\n            )}\n          >\n            {placeholder || ' '}\n          </pre>\n        )}\n\n        <textarea\n          autoCapitalize=\"off\"\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          autoFocus={autoFocus}\n          data-gramm={false}\n          ref={ref}\n          value={code}\n          onChange={(e) => {\n            onChange?.(e);\n            setCode(e.target.value);\n          }}\n          {...styleProps(styles.textarea, classNames?.textarea, customStyles?.textarea)}\n          {...rest}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nCodeEditor.displayName = 'CodeEditor';\n\nexport default CodeEditor;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,aAAa,MAChB,EACC,WACA,YACA,QAAQ,cACR,eAAe,IACf,UACA,cAAc,IACd,OACA,WACA,eACA,OACA,WAAW,YACX,UAAU,cACV,OACA,QACA,MACA,KACA,GAAG,WACC;CACJ,MAAM,CAAC,MAAM,WAAWA,mBAAc,cAAc;EAClD;EACA,UAAU;EACV;CACF,CAAC;CAED,OACE,qBAACC,mBAAD;EACQ;EACN,QAAQ,UAAU;EAClB,OAAO,SAAS;EAChB,GAAI,WACF,CAAC,OAAO,MAAM,cAAc,QAAQ,GACpC,KACE,oBACA,YAAY,gBAAgB,+BAC5B,SACF,GACA,KACF;EAZF,UAAA,CAcG,QACC,oBAAC,uBAAD;GACE,WAAW,KAAK,8BAA8B,YAAY,SAAS;GACzD;GACV,OAAO,cAAc;GACZ;GACT,QAAQ,OAAO;GAEd,UAAA;EACoB,CAAA,IAEvB,oBAAC,OAAD;GACE,GAAI,WACF,OAAO,WACP,KAAK,8BAA8B,YAAY,SAAS,GACxD,EACE,OAAO,OAAO,qBAChB,CACF;GAEC,UAAA,eAAe;EACb,CAAA,GAGP,oBAAC,YAAD;GACE,gBAAe;GACf,cAAa;GACb,aAAY;GACD;GACX,cAAY;GACP;GACL,OAAO;GACP,WAAW,MAAM;IACf,WAAW,CAAC;IACZ,QAAQ,EAAE,OAAO,KAAK;GACxB;GACA,GAAI,WAAW,OAAO,UAAU,YAAY,UAAU,cAAc,QAAQ;GAC5E,GAAI;EACL,CAAA,CACM;;AAEb,CACF;AAEA,WAAW,cAAc"}
+{"version":3,"file":"CodeEditor.mjs","names":["Flexbox","clsx"],"sources":["../../src/CodeEditor/CodeEditor.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { SyntaxHighlighterImpl } from '@/Highlighter/SyntaxHighlighter';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles, variantStyles } from './style';\nimport type { CodeEditorProps } from './type';\n\nconst CodeEditor = memo<CodeEditorProps>(\n  ({\n    autoFocus,\n    classNames,\n    styles: customStyles,\n    defaultValue = '',\n    onChange,\n    placeholder = '',\n    style,\n    className,\n    onValueChange,\n    value,\n    language = 'markdown',\n    variant = 'borderless',\n    width,\n    height,\n    flex,\n    ref,\n    ...rest\n  }) => {\n    const [code, setCode] = useControlledState(defaultValue, {\n      defaultValue,\n      onChange: onValueChange,\n      value,\n    });\n\n    return (\n      <Flexbox\n        flex={flex}\n        height={height ?? 'fit-content'}\n        width={width ?? '100%'}\n        {...styleProps(\n          [styles.root, variantStyles[variant]],\n          clsx(\n            'lobe-code-editor',\n            variant === 'borderless' && 'lobe-code-editor-borderless',\n            className,\n          ),\n          style,\n        )}\n      >\n        {value ? (\n          <SyntaxHighlighterImpl\n            className={clsx('lobe-code-editor-highlight', classNames?.highlight)}\n            language={language}\n            style={customStyles?.highlight}\n            variant={variant}\n            xstyle={styles.highlight}\n          >\n            {value}\n          </SyntaxHighlighterImpl>\n        ) : (\n          <pre\n            {...styleProps(\n              styles.highlight,\n              clsx('lobe-code-editor-highlight', classNames?.highlight),\n              {\n                color: cssVar.colorTextDescription,\n              },\n            )}\n          >\n            {placeholder || ' '}\n          </pre>\n        )}\n\n        <textarea\n          autoCapitalize=\"off\"\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          autoFocus={autoFocus}\n          data-gramm={false}\n          ref={ref}\n          value={code}\n          onChange={(e) => {\n            onChange?.(e);\n            setCode(e.target.value);\n          }}\n          {...styleProps(styles.textarea, classNames?.textarea, customStyles?.textarea)}\n          {...rest}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nCodeEditor.displayName = 'CodeEditor';\n\nexport default CodeEditor;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,aAAa,MAChB,EACC,WACA,YACA,QAAQ,cACR,eAAe,IACf,UACA,cAAc,IACd,OACA,WACA,eACA,OACA,WAAW,YACX,UAAU,cACV,OACA,QACA,MACA,KACA,GAAG,WACC;CACJ,MAAM,CAAC,MAAM,WAAW,mBAAmB,cAAc;EACvD;EACA,UAAU;EACV;CACF,CAAC;CAED,OACE,qBAACA,mBAAD;EACQ;EACN,QAAQ,UAAU;EAClB,OAAO,SAAS;EAChB,GAAI,WACF,CAAC,OAAO,MAAM,cAAc,QAAQ,GACpCC,OACE,oBACA,YAAY,gBAAgB,+BAC5B,SACF,GACA,KACF;EAZF,UAAA,CAcG,QACC,oBAAC,uBAAD;GACE,WAAWA,OAAK,8BAA8B,YAAY,SAAS;GACzD;GACV,OAAO,cAAc;GACZ;GACT,QAAQ,OAAO;GAEd,UAAA;EACoB,CAAA,IAEvB,oBAAC,OAAD;GACE,GAAI,WACF,OAAO,WACPA,OAAK,8BAA8B,YAAY,SAAS,GACxD,EACE,OAAO,OAAO,qBAChB,CACF;GAEC,UAAA,eAAe;EACb,CAAA,GAGP,oBAAC,YAAD;GACE,gBAAe;GACf,cAAa;GACb,aAAY;GACD;GACX,cAAY;GACP;GACL,OAAO;GACP,WAAW,MAAM;IACf,WAAW,CAAC;IACZ,QAAQ,EAAE,OAAO,KAAK;GACxB;GACA,GAAI,WAAW,OAAO,UAAU,YAAY,UAAU,cAAc,QAAQ;GAC5E,GAAI;EACL,CAAA,CACM;;AAEb,CACF;AAEA,WAAW,cAAc"}

package/es/ColorPicker/ColorInputs.mjs

@@ -0,0 +1,136 @@
+"use client";
+import Input_default from "../Input/Input.mjs";
+import InputNumber_default from "../Input/InputNumber.mjs";
+import { formatColor, fromHsl, fromRgb, normalizeHexInput, parseColor, toHsl, toRgb } from "./color.mjs";
+import { SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectRoot, SelectTrigger, SelectValue } from "../Select/atoms.mjs";
+import { styles } from "./style.mjs";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { Check, ChevronDown } from "lucide-react";
+//#region src/ColorPicker/ColorInputs.tsx
+const CHANNELS = {
+	hsl: {
+		labels: [
+			"H",
+			"S",
+			"L"
+		],
+		max: [
+			360,
+			100,
+			100
+		]
+	},
+	rgb: {
+		labels: [
+			"R",
+			"G",
+			"B"
+		],
+		max: [
+			255,
+			255,
+			255
+		]
+	}
+};
+const FORMATS = [
+	"hex",
+	"rgb",
+	"hsl"
+];
+const ColorInputs = ({ alpha, alphaLabel, format, formatLabel, hsva, onCommit, onFormatChange }) => {
+	const hex = formatColor(hsva, alpha);
+	const [drafts, setDrafts] = useState({});
+	useEffect(() => {
+		setDrafts({});
+	}, [hex, format]);
+	const channels = (kind) => kind === "rgb" ? toRgb(hsva) : toHsl(hsva);
+	const hints = {
+		hex: hex.slice(0, 7).toUpperCase(),
+		hsl: toHsl(hsva).join(" "),
+		rgb: toRgb(hsva).join(" ")
+	};
+	const commitHex = () => {
+		const draft = drafts.hex;
+		if (draft === void 0) return;
+		const normalized = normalizeHexInput(draft);
+		if (!normalized) return setDrafts({});
+		onCommit(parseColor(normalized, hsva.h));
+	};
+	const commitChannel = (kind, index) => {
+		const draft = drafts[`${kind}${index}`];
+		if (draft === void 0) return;
+		const parsed = Number.parseInt(draft, 10);
+		if (Number.isNaN(parsed)) return setDrafts({});
+		const next = channels(kind);
+		next[index] = Math.min(CHANNELS[kind].max[index], Math.max(0, parsed));
+		onCommit(kind === "rgb" ? fromRgb(next, hsva) : fromHsl(next, hsva));
+	};
+	const field = (key, label, value, onCommitField) => /* @__PURE__ */ jsx(Input_default, {
+		"aria-label": label,
+		prefix: format === "hex" ? "#" : void 0,
+		size: "small",
+		title: label,
+		value: drafts[key] ?? value,
+		variant: "filled",
+		className: stylex.props(styles.channelField, format !== "hex" && styles.channelCompact).className,
+		classNames: format === "hex" ? void 0 : { input: stylex.props(styles.channelInput).className },
+		onBlur: onCommitField,
+		onChange: (event) => setDrafts((current) => ({
+			...current,
+			[key]: event.target.value
+		})),
+		onPressEnter: onCommitField
+	}, key);
+	return /* @__PURE__ */ jsxs("div", {
+		...stylex.props(styles.inputs),
+		children: [
+			/* @__PURE__ */ jsxs(SelectRoot, {
+				value: format,
+				onValueChange: (next) => next && onFormatChange(next),
+				children: [/* @__PURE__ */ jsxs(SelectTrigger, {
+					"aria-label": formatLabel,
+					className: stylex.props(styles.formatSelect).className,
+					size: "small",
+					variant: "filled",
+					children: [/* @__PURE__ */ jsx(SelectValue, { children: (current) => String(current).toUpperCase() }), /* @__PURE__ */ jsx(SelectIcon, { children: /* @__PURE__ */ jsx(ChevronDown, { size: 12 }) })]
+				}), /* @__PURE__ */ jsx(SelectPortal, { children: /* @__PURE__ */ jsx(SelectPositioner, { children: /* @__PURE__ */ jsx(SelectPopup, {
+					className: stylex.props(styles.formatPopup).className,
+					children: /* @__PURE__ */ jsx(SelectList, { children: FORMATS.map((item) => /* @__PURE__ */ jsxs(SelectItem, {
+						value: item,
+						children: [
+							/* @__PURE__ */ jsx(SelectItemText, { children: item.toUpperCase() }),
+							/* @__PURE__ */ jsx("span", {
+								...stylex.props(styles.formatHint),
+								children: hints[item]
+							}),
+							/* @__PURE__ */ jsx(SelectItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 14 }) })
+						]
+					}, item)) })
+				}) }) })]
+			}),
+			format === "hex" ? field("hex", "HEX", hex.slice(1).toUpperCase(), commitHex) : channels(format).map((value, index) => field(`${format}${index}`, CHANNELS[format].labels[index], String(value), () => commitChannel(format, index))),
+			alpha && /* @__PURE__ */ jsx(InputNumber_default, {
+				"aria-label": alphaLabel,
+				className: stylex.props(styles.alphaField).className,
+				controls: false,
+				max: 100,
+				min: 0,
+				size: "small",
+				suffix: "%",
+				value: Math.round(hsva.a * 100),
+				variant: "filled",
+				onChange: (a) => a !== null && onCommit({
+					...hsva,
+					a: a / 100
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { ColorInputs as default };
+
+//# sourceMappingURL=ColorInputs.mjs.map

package/es/ColorPicker/ColorInputs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInputs.mjs","names":["Input","InputNumber"],"sources":["../../src/ColorPicker/ColorInputs.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { Check, ChevronDown } from 'lucide-react';\nimport { useEffect, useState } from 'react';\n\nimport { Input, InputNumber } from '@/Input';\nimport {\n  SelectIcon,\n  SelectItem,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectList,\n  SelectPopup,\n  SelectPortal,\n  SelectPositioner,\n  SelectRoot,\n  SelectTrigger,\n  SelectValue,\n} from '@/Select';\n\nimport {\n  type ColorFormat,\n  formatColor,\n  fromHsl,\n  fromRgb,\n  type Hsva,\n  normalizeHexInput,\n  parseColor,\n  toHsl,\n  toRgb,\n} from './color';\nimport { styles } from './style';\n\ntype Channels = [number, number, number];\n\nconst CHANNELS: Record<Exclude<ColorFormat, 'hex'>, { labels: string[]; max: Channels }> = {\n  hsl: { labels: ['H', 'S', 'L'], max: [360, 100, 100] },\n  rgb: { labels: ['R', 'G', 'B'], max: [255, 255, 255] },\n};\n\nconst FORMATS: ColorFormat[] = ['hex', 'rgb', 'hsl'];\n\nexport interface ColorInputsProps {\n  alpha: boolean;\n  alphaLabel: string;\n  format: ColorFormat;\n  formatLabel: string;\n  hsva: Hsva;\n  onCommit: (next: Hsva) => void;\n  onFormatChange: (format: ColorFormat) => void;\n}\n\nconst ColorInputs = ({\n  alpha,\n  alphaLabel,\n  format,\n  formatLabel,\n  hsva,\n  onCommit,\n  onFormatChange,\n}: ColorInputsProps) => {\n  const hex = formatColor(hsva, alpha);\n  const [drafts, setDrafts] = useState<Record<string, string>>({});\n\n  useEffect(() => {\n    setDrafts({});\n  }, [hex, format]);\n\n  const channels = (kind: Exclude<ColorFormat, 'hex'>): Channels =>\n    kind === 'rgb' ? toRgb(hsva) : toHsl(hsva);\n\n  const hints: Record<ColorFormat, string> = {\n    hex: hex.slice(0, 7).toUpperCase(),\n    hsl: toHsl(hsva).join(' '),\n    rgb: toRgb(hsva).join(' '),\n  };\n\n  const commitHex = () => {\n    const draft = drafts.hex;\n    if (draft === undefined) return;\n    const normalized = normalizeHexInput(draft);\n    if (!normalized) return setDrafts({});\n    onCommit(parseColor(normalized, hsva.h));\n  };\n\n  const commitChannel = (kind: Exclude<ColorFormat, 'hex'>, index: number) => {\n    const draft = drafts[`${kind}${index}`];\n    if (draft === undefined) return;\n    const parsed = Number.parseInt(draft, 10);\n    if (Number.isNaN(parsed)) return setDrafts({});\n    const next = channels(kind);\n    next[index] = Math.min(CHANNELS[kind].max[index], Math.max(0, parsed));\n    onCommit(kind === 'rgb' ? fromRgb(next, hsva) : fromHsl(next, hsva));\n  };\n\n  const field = (key: string, label: string, value: string, onCommitField: () => void) => (\n    <Input\n      aria-label={label}\n      key={key}\n      prefix={format === 'hex' ? '#' : undefined}\n      size=\"small\"\n      title={label}\n      value={drafts[key] ?? value}\n      variant=\"filled\"\n      className={\n        stylex.props(styles.channelField, format !== 'hex' && styles.channelCompact).className\n      }\n      classNames={\n        format === 'hex' ? undefined : { input: stylex.props(styles.channelInput).className }\n      }\n      onBlur={onCommitField}\n      onChange={(event) => setDrafts((current) => ({ ...current, [key]: event.target.value }))}\n      onPressEnter={onCommitField}\n    />\n  );\n\n  return (\n    <div {...stylex.props(styles.inputs)}>\n      <SelectRoot\n        value={format}\n        onValueChange={(next) => next && onFormatChange(next as ColorFormat)}\n      >\n        <SelectTrigger\n          aria-label={formatLabel}\n          className={stylex.props(styles.formatSelect).className}\n          size=\"small\"\n          variant=\"filled\"\n        >\n          <SelectValue>{(current) => String(current).toUpperCase()}</SelectValue>\n          <SelectIcon>\n            <ChevronDown size={12} />\n          </SelectIcon>\n        </SelectTrigger>\n        <SelectPortal>\n          <SelectPositioner>\n            <SelectPopup className={stylex.props(styles.formatPopup).className}>\n              <SelectList>\n                {FORMATS.map((item) => (\n                  <SelectItem key={item} value={item}>\n                    <SelectItemText>{item.toUpperCase()}</SelectItemText>\n                    <span {...stylex.props(styles.formatHint)}>{hints[item]}</span>\n                    <SelectItemIndicator>\n                      <Check size={14} />\n                    </SelectItemIndicator>\n                  </SelectItem>\n                ))}\n              </SelectList>\n            </SelectPopup>\n          </SelectPositioner>\n        </SelectPortal>\n      </SelectRoot>\n      {format === 'hex'\n        ? field('hex', 'HEX', hex.slice(1).toUpperCase(), commitHex)\n        : channels(format).map((value, index) =>\n            field(`${format}${index}`, CHANNELS[format].labels[index], String(value), () =>\n              commitChannel(format, index),\n            ),\n          )}\n      {alpha && (\n        <InputNumber\n          aria-label={alphaLabel}\n          className={stylex.props(styles.alphaField).className}\n          controls={false}\n          max={100}\n          min={0}\n          size=\"small\"\n          suffix=\"%\"\n          value={Math.round(hsva.a * 100)}\n          variant=\"filled\"\n          onChange={(a) => a !== null && onCommit({ ...hsva, a: a / 100 })}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default ColorInputs;\n"],"mappings":"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"}

package/es/ColorPicker/ColorPanel.mjs

@@ -0,0 +1,145 @@
+"use client";
+import { focusRing } from "../styles/stylex/focusRing.mjs";
+import Icon from "../Icon/Icon.mjs";
+import { formatColor, parseColor } from "./color.mjs";
+import Slider from "../Slider/Slider.mjs";
+import { styles } from "./style.mjs";
+import ColorInputs from "./ColorInputs.mjs";
+import SaturationArea from "./SaturationArea.mjs";
+import Swatches from "./Swatches.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { Pipette } from "lucide-react";
+//#region src/ColorPicker/ColorPanel.tsx
+const hasEyeDropper = () => typeof window !== "undefined" && "EyeDropper" in window;
+const ColorPanel = ({ alpha, format, hsva, labels, onApply, onCommit, onFormatChange, onUpdate, original, presets, recent }) => {
+	const hex = formatColor(hsva, alpha);
+	const opaque = formatColor(hsva, false);
+	const sliderClassNames = (track) => ({
+		indicator: stylex.props(styles.hidden).className,
+		thumb: stylex.props(styles.sliderThumb).className,
+		track: stylex.props(styles[track]).className
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...stylex.props(styles.panel),
+		children: [
+			/* @__PURE__ */ jsx(SaturationArea, {
+				color: opaque,
+				hue: hsva.h,
+				label: labels.saturation,
+				saturation: hsva.s,
+				value: hsva.v,
+				onChange: (s, v) => onUpdate({
+					...hsva,
+					s,
+					v
+				}),
+				onChangeComplete: (s, v) => onCommit({
+					...hsva,
+					s,
+					v
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				...stylex.props(styles.controls),
+				children: [
+					hasEyeDropper() && /* @__PURE__ */ jsx("button", {
+						"aria-label": labels.eyeDropper,
+						type: "button",
+						...stylex.props(focusRing.info, styles.eyeDropper),
+						onClick: async () => {
+							const result = await new window.EyeDropper().open().catch(() => null);
+							if (result) onApply({
+								...parseColor(result.sRGBHex, hsva.h),
+								a: hsva.a
+							});
+						},
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: Pipette,
+							size: 14
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						...stylex.props(styles.sliders),
+						children: [/* @__PURE__ */ jsx(Slider, {
+							"aria-label": labels.hue,
+							classNames: sliderClassNames("hueTrack"),
+							max: 360,
+							min: 0,
+							value: hsva.h,
+							styles: { track: { "--lobe-color-picker-thumb": `hsl(${hsva.h} 100% 50%)` } },
+							onChange: (h) => onUpdate({
+								...hsva,
+								h
+							}),
+							onChangeComplete: (h) => onCommit({
+								...hsva,
+								h
+							})
+						}), alpha && /* @__PURE__ */ jsx(Slider, {
+							"aria-label": labels.alpha,
+							classNames: sliderClassNames("alphaTrack"),
+							max: 100,
+							min: 0,
+							value: Math.round(hsva.a * 100),
+							styles: { track: {
+								"--lobe-color-picker-alpha": opaque,
+								"--lobe-color-picker-thumb": hex
+							} },
+							onChange: (a) => onUpdate({
+								...hsva,
+								a: a / 100
+							}),
+							onChangeComplete: (a) => onCommit({
+								...hsva,
+								a: a / 100
+							})
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						...stylex.props(styles.compare),
+						style: { height: alpha ? 30 : 28 },
+						children: [/* @__PURE__ */ jsx("button", {
+							"aria-label": labels.original,
+							title: labels.original,
+							type: "button",
+							...stylex.props(focusRing.info, styles.compareHalf, styles.compareRestore),
+							style: { background: original },
+							onClick: () => onApply(parseColor(original, hsva.h))
+						}), /* @__PURE__ */ jsx("span", {
+							...stylex.props(styles.compareHalf),
+							style: { background: hex }
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(ColorInputs, {
+				alpha,
+				alphaLabel: labels.alpha,
+				format,
+				formatLabel: labels.format,
+				hsva,
+				onCommit: onApply,
+				onFormatChange
+			}),
+			/* @__PURE__ */ jsx(Swatches, {
+				current: hex,
+				labels: {
+					presets: labels.presets,
+					recent: labels.recent,
+					swatches: labels.swatches
+				},
+				presets,
+				recent,
+				onPick: (color) => onApply({
+					...parseColor(color, hsva.h),
+					a: parseColor(color).a
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { ColorPanel as default };
+
+//# sourceMappingURL=ColorPanel.mjs.map

package/es/ColorPicker/ColorPanel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPanel.mjs","names":[],"sources":["../../src/ColorPicker/ColorPanel.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { Pipette } from 'lucide-react';\nimport type { CSSProperties } from 'react';\n\nimport Icon from '@/Icon';\nimport { Slider } from '@/Slider';\nimport { focusRing } from '@/styles/stylex/focusRing';\n\nimport { type ColorFormat, formatColor, type Hsva, parseColor } from './color';\nimport ColorInputs from './ColorInputs';\nimport SaturationArea from './SaturationArea';\nimport { styles } from './style';\nimport Swatches from './Swatches';\n\nconst hasEyeDropper = () => typeof window !== 'undefined' && 'EyeDropper' in window;\n\ntype EyeDropperConstructor = new () => { open: () => Promise<{ sRGBHex: string }> };\n\nexport interface ColorPanelLabels {\n  alpha: string;\n  eyeDropper: string;\n  format: string;\n  hue: string;\n  original: string;\n  presets: string;\n  recent: string;\n  saturation: string;\n  swatches: string;\n}\n\nexport interface ColorPanelProps {\n  alpha: boolean;\n  format: ColorFormat;\n  hsva: Hsva;\n  labels: ColorPanelLabels;\n  onApply: (next: Hsva) => void;\n  onCommit: (next: Hsva) => void;\n  onFormatChange: (format: ColorFormat) => void;\n  onUpdate: (next: Hsva) => void;\n  original: string;\n  presets?: string[];\n  recent: boolean;\n}\n\nconst ColorPanel = ({\n  alpha,\n  format,\n  hsva,\n  labels,\n  onApply,\n  onCommit,\n  onFormatChange,\n  onUpdate,\n  original,\n  presets,\n  recent,\n}: ColorPanelProps) => {\n  const hex = formatColor(hsva, alpha);\n  const opaque = formatColor(hsva, false);\n  const sliderClassNames = (track: keyof typeof styles) => ({\n    indicator: stylex.props(styles.hidden).className,\n    thumb: stylex.props(styles.sliderThumb).className,\n    track: stylex.props(styles[track]).className,\n  });\n\n  return (\n    <div {...stylex.props(styles.panel)}>\n      <SaturationArea\n        color={opaque}\n        hue={hsva.h}\n        label={labels.saturation}\n        saturation={hsva.s}\n        value={hsva.v}\n        onChange={(s, v) => onUpdate({ ...hsva, s, v })}\n        onChangeComplete={(s, v) => onCommit({ ...hsva, s, v })}\n      />\n      <div {...stylex.props(styles.controls)}>\n        {hasEyeDropper() && (\n          <button\n            aria-label={labels.eyeDropper}\n            type=\"button\"\n            {...stylex.props(focusRing.info, styles.eyeDropper)}\n            onClick={async () => {\n              const dropper = new (\n                window as unknown as { EyeDropper: EyeDropperConstructor }\n              ).EyeDropper();\n              const result = await dropper.open().catch(() => null);\n              if (result) onApply({ ...parseColor(result.sRGBHex, hsva.h), a: hsva.a });\n            }}\n          >\n            <Icon icon={Pipette} size={14} />\n          </button>\n        )}\n        <div {...stylex.props(styles.sliders)}>\n          <Slider\n            aria-label={labels.hue}\n            classNames={sliderClassNames('hueTrack')}\n            max={360}\n            min={0}\n            value={hsva.h}\n            styles={{\n              track: { '--lobe-color-picker-thumb': `hsl(${hsva.h} 100% 50%)` } as CSSProperties,\n            }}\n            onChange={(h) => onUpdate({ ...hsva, h })}\n            onChangeComplete={(h) => onCommit({ ...hsva, h })}\n          />\n          {alpha && (\n            <Slider\n              aria-label={labels.alpha}\n              classNames={sliderClassNames('alphaTrack')}\n              max={100}\n              min={0}\n              value={Math.round(hsva.a * 100)}\n              styles={{\n                track: {\n                  '--lobe-color-picker-alpha': opaque,\n                  '--lobe-color-picker-thumb': hex,\n                } as CSSProperties,\n              }}\n              onChange={(a) => onUpdate({ ...hsva, a: a / 100 })}\n              onChangeComplete={(a) => onCommit({ ...hsva, a: a / 100 })}\n            />\n          )}\n        </div>\n        <div {...stylex.props(styles.compare)} style={{ height: alpha ? 30 : 28 }}>\n          <button\n            aria-label={labels.original}\n            title={labels.original}\n            type=\"button\"\n            {...stylex.props(focusRing.info, styles.compareHalf, styles.compareRestore)}\n            style={{ background: original }}\n            onClick={() => onApply(parseColor(original, hsva.h))}\n          />\n          <span {...stylex.props(styles.compareHalf)} style={{ background: hex }} />\n        </div>\n      </div>\n      <ColorInputs\n        alpha={alpha}\n        alphaLabel={labels.alpha}\n        format={format}\n        formatLabel={labels.format}\n        hsva={hsva}\n        onCommit={onApply}\n        onFormatChange={onFormatChange}\n      />\n      <Swatches\n        current={hex}\n        labels={{ presets: labels.presets, recent: labels.recent, swatches: labels.swatches }}\n        presets={presets}\n        recent={recent}\n        onPick={(color) => onApply({ ...parseColor(color, hsva.h), a: parseColor(color).a })}\n      />\n    </div>\n  );\n};\n\nexport default ColorPanel;\n"],"mappings":"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"}