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

package/es/Form/Form.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Form.mjs","names":["Form","BaseForm"],"sources":["../../src/Form/Form.tsx"],"sourcesContent":["'use client';\n\nimport { Form as BaseForm } from '@base-ui/react/form';\nimport { isUndefined } from 'es-toolkit/compat';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\nimport { useResponsive } from '@/styles/theme/scope';\n\nimport FormField from './components/FormField';\nimport FormFlatGroup from './components/FormFlatGroup';\nimport FormGroup from './components/FormGroup';\nimport { FormContext } from './context';\nimport { formMarker } from './marker.stylex';\nimport { rootStyles } from './style';\nimport type { FormFieldProps, FormGroupItemType, FormProps } from './type';\n\nconst serializeForm = (form: HTMLFormElement | null) => {\n  if (!form) return '';\n  const entries = [...new FormData(form).entries()].filter(\n    ([, value]) => typeof value === 'string',\n  ) as [string, string][];\n  return JSON.stringify(entries.sort((a, b) => a[0].localeCompare(b[0])));\n};\n\nconst Form = memo<FormProps>(\n  ({\n    className,\n    itemMinWidth,\n    footer,\n    items = [],\n    children,\n    itemsType = 'group',\n    variant = 'borderless',\n    classNames,\n    styles: customStyles,\n    gap,\n    style,\n    collapsible,\n    defaultActiveKey,\n    initialValues,\n    activeKey,\n    onCollapse,\n    onFinish,\n    onFormSubmit,\n    layout,\n    ref,\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n    const formRef = useRef<HTMLFormElement>(null);\n    const [submitLoading, setSubmitLoading] = useState(false);\n    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);\n    const snapshotRef = useRef('');\n\n    const syncUnsaved = useCallback(() => {\n      setHasUnsavedChanges(serializeForm(formRef.current) !== snapshotRef.current);\n    }, []);\n\n    useEffect(() => {\n      const form = formRef.current;\n      if (!form) return;\n      snapshotRef.current = serializeForm(form);\n      let resetTimer: ReturnType<typeof setTimeout>;\n      const handleMutation = () => syncUnsaved();\n      const handleReset = () => {\n        resetTimer = setTimeout(() => {\n          snapshotRef.current = serializeForm(formRef.current);\n          syncUnsaved();\n        }, 0);\n      };\n      form.addEventListener('input', handleMutation);\n      form.addEventListener('change', handleMutation);\n      form.addEventListener('reset', handleReset);\n      return () => {\n        clearTimeout(resetTimer);\n        form.removeEventListener('input', handleMutation);\n        form.removeEventListener('change', handleMutation);\n        form.removeEventListener('reset', handleReset);\n      };\n    }, [syncUnsaved]);\n\n    const requestReset = useCallback(() => {\n      formRef.current?.reset();\n    }, []);\n\n    const mergedRef = useCallback(\n      (node: HTMLFormElement | null) => {\n        formRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) ref.current = node;\n      },\n      [ref],\n    );\n\n    const context = useMemo(\n      () => ({\n        hasUnsavedChanges,\n        initialValues,\n        itemMinWidth,\n        layout: layout || (mobile ? ('vertical' as const) : ('horizontal' as const)),\n        requestReset,\n        submitLoading,\n        variant,\n      }),\n      [\n        hasUnsavedChanges,\n        initialValues,\n        itemMinWidth,\n        layout,\n        mobile,\n        requestReset,\n        submitLoading,\n        variant,\n      ],\n    );\n\n    const mapFlat = useCallback(\n      (item: FormFieldProps, itemIndex: number) => (\n        <FormField\n          className={classNames?.item}\n          divider={itemIndex !== 0}\n          key={itemIndex}\n          style={customStyles?.item}\n          variant={variant}\n          {...item}\n        />\n      ),\n      [variant, classNames, customStyles],\n    );\n\n    const mapTree = useCallback(\n      (group: FormGroupItemType, groupIndex: number) => {\n        const key = group?.key || groupIndex;\n        return (\n          <FormGroup\n            active={activeKey && group?.key ? activeKey.includes(key) : undefined}\n            className={classNames?.group}\n            collapsible={isUndefined(group.collapsible) ? collapsible : group.collapsible}\n            desc={group?.desc}\n            extra={group?.extra}\n            icon={group?.icon}\n            key={key}\n            style={customStyles?.group}\n            title={group.title}\n            variant={group?.variant || variant}\n            defaultActive={\n              defaultActiveKey && group?.key ? defaultActiveKey.includes(key) : group?.defaultActive\n            }\n            onCollapse={(active) => {\n              let keys: (string | number)[] = activeKey || defaultActiveKey || [];\n              keys = keys.filter((k) => k !== key);\n              onCollapse?.(active ? [...keys, key] : keys);\n            }}\n          >\n            {Array.isArray(group.children)\n              ? group.children.filter((item) => !item.hidden).map((item, i) => mapFlat(item, i))\n              : group.children}\n          </FormGroup>\n        );\n      },\n      [\n        activeKey,\n        collapsible,\n        defaultActiveKey,\n        onCollapse,\n        variant,\n        classNames,\n        customStyles,\n        mapFlat,\n      ],\n    );\n\n    return (\n      <FormContext value={context}>\n        <BaseForm\n          ref={mergedRef}\n          {...styleProps(\n            [formMarker, rootStyles.root, variant === 'borderless' && rootStyles.borderless],\n            className,\n            { gap, ...style },\n          )}\n          onFormSubmit={async (values, eventDetails) => {\n            onFormSubmit?.(values, eventDetails);\n            if (!onFinish) return;\n            setSubmitLoading(true);\n            try {\n              await onFinish(values, eventDetails);\n              snapshotRef.current = serializeForm(formRef.current);\n              syncUnsaved();\n            } finally {\n              setSubmitLoading(false);\n            }\n          }}\n          {...rest}\n        >\n          {items && items.length > 0 ? (\n            itemsType === 'group' ? (\n              (items as FormGroupItemType[]).map((item, i) => mapTree(item, i))\n            ) : (\n              <FormFlatGroup\n                className={classNames?.group}\n                style={customStyles?.group}\n                variant={variant}\n              >\n                {(items as FormFieldProps[])\n                  .filter((item) => !item.hidden)\n                  .map((item, i) => mapFlat(item, i))}\n              </FormFlatGroup>\n            )\n          ) : undefined}\n          {children}\n          {footer}\n        </BaseForm>\n      </FormContext>\n    );\n  },\n);\n\nForm.displayName = 'Form';\n\nexport default Form;\n"],"mappings":"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"}
+{"version":3,"file":"Form.mjs","names":["Form","BaseForm"],"sources":["../../src/Form/Form.tsx"],"sourcesContent":["'use client';\n\nimport { Form as BaseForm } from '@base-ui/react/form';\nimport { isUndefined } from 'es-toolkit/compat';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\nimport { useResponsive } from '@/styles/theme/scope';\n\nimport FormField from './components/FormField';\nimport FormFlatGroup from './components/FormFlatGroup';\nimport FormGroup from './components/FormGroup';\nimport { FormContext } from './context';\nimport { formMarker } from './marker.stylex';\nimport { rootStyles } from './style';\nimport type { FormFieldProps, FormGroupItemType, FormProps } from './type';\n\nconst serializeForm = (form: HTMLFormElement | null) => {\n  if (!form) return '';\n  const entries = [...new FormData(form).entries()].filter(\n    ([, value]) => typeof value === 'string',\n  ) as [string, string][];\n  return JSON.stringify(entries.sort((a, b) => a[0].localeCompare(b[0])));\n};\n\nconst Form = memo<FormProps>(\n  ({\n    className,\n    itemMinWidth,\n    footer,\n    items = [],\n    children,\n    itemsType = 'group',\n    variant = 'borderless',\n    classNames,\n    styles: customStyles,\n    gap,\n    style,\n    collapsible,\n    defaultActiveKey,\n    initialValues,\n    activeKey,\n    onCollapse,\n    onFinish,\n    onFormSubmit,\n    layout,\n    ref,\n    compact,\n    itemPadding,\n    ...rest\n  }) => {\n    const resolvedGap = gap ?? (compact ? 12 : undefined);\n    const resolvedItemPadding = itemPadding ?? (compact ? 10 : undefined);\n    const { mobile } = useResponsive();\n    const formRef = useRef<HTMLFormElement>(null);\n    const [submitLoading, setSubmitLoading] = useState(false);\n    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);\n    const snapshotRef = useRef('');\n\n    const syncUnsaved = useCallback(() => {\n      setHasUnsavedChanges(serializeForm(formRef.current) !== snapshotRef.current);\n    }, []);\n\n    useEffect(() => {\n      const form = formRef.current;\n      if (!form) return;\n      snapshotRef.current = serializeForm(form);\n      let resetTimer: ReturnType<typeof setTimeout>;\n      const handleMutation = () => syncUnsaved();\n      const handleReset = () => {\n        resetTimer = setTimeout(() => {\n          snapshotRef.current = serializeForm(formRef.current);\n          syncUnsaved();\n        }, 0);\n      };\n      form.addEventListener('input', handleMutation);\n      form.addEventListener('change', handleMutation);\n      form.addEventListener('reset', handleReset);\n      return () => {\n        clearTimeout(resetTimer);\n        form.removeEventListener('input', handleMutation);\n        form.removeEventListener('change', handleMutation);\n        form.removeEventListener('reset', handleReset);\n      };\n    }, [syncUnsaved]);\n\n    const requestReset = useCallback(() => {\n      formRef.current?.reset();\n    }, []);\n\n    const mergedRef = useCallback(\n      (node: HTMLFormElement | null) => {\n        formRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) ref.current = node;\n      },\n      [ref],\n    );\n\n    const context = useMemo(\n      () => ({\n        hasUnsavedChanges,\n        initialValues,\n        itemMinWidth,\n        layout: layout || (mobile ? ('vertical' as const) : ('horizontal' as const)),\n        requestReset,\n        submitLoading,\n        variant,\n      }),\n      [\n        hasUnsavedChanges,\n        initialValues,\n        itemMinWidth,\n        layout,\n        mobile,\n        requestReset,\n        submitLoading,\n        variant,\n      ],\n    );\n\n    const mapFlat = useCallback(\n      (item: FormFieldProps, itemIndex: number) => (\n        <FormField\n          className={classNames?.item}\n          divider={itemIndex !== 0}\n          key={itemIndex}\n          style={customStyles?.item}\n          variant={variant}\n          {...item}\n        />\n      ),\n      [variant, classNames, customStyles],\n    );\n\n    const mapTree = useCallback(\n      (group: FormGroupItemType, groupIndex: number) => {\n        const key = group?.key || groupIndex;\n        return (\n          <FormGroup\n            active={activeKey && group?.key ? activeKey.includes(key) : undefined}\n            className={classNames?.group}\n            collapsible={isUndefined(group.collapsible) ? collapsible : group.collapsible}\n            desc={group?.desc}\n            extra={group?.extra}\n            icon={group?.icon}\n            key={key}\n            style={customStyles?.group}\n            title={group.title}\n            variant={group?.variant || variant}\n            defaultActive={\n              defaultActiveKey && group?.key ? defaultActiveKey.includes(key) : group?.defaultActive\n            }\n            onCollapse={(active) => {\n              let keys: (string | number)[] = activeKey || defaultActiveKey || [];\n              keys = keys.filter((k) => k !== key);\n              onCollapse?.(active ? [...keys, key] : keys);\n            }}\n          >\n            {Array.isArray(group.children)\n              ? group.children.filter((item) => !item.hidden).map((item, i) => mapFlat(item, i))\n              : group.children}\n          </FormGroup>\n        );\n      },\n      [\n        activeKey,\n        collapsible,\n        defaultActiveKey,\n        onCollapse,\n        variant,\n        classNames,\n        customStyles,\n        mapFlat,\n      ],\n    );\n\n    return (\n      <FormContext value={context}>\n        <BaseForm\n          ref={mergedRef}\n          {...styleProps(\n            [formMarker, rootStyles.root, variant === 'borderless' && rootStyles.borderless],\n            className,\n            {\n              gap: resolvedGap,\n              ...(resolvedGap === undefined\n                ? undefined\n                : {\n                    '--lobe-form-gap':\n                      typeof resolvedGap === 'number' ? `${resolvedGap}px` : resolvedGap,\n                  }),\n              ...(resolvedItemPadding === undefined\n                ? undefined\n                : {\n                    '--lobe-form-item-padding-block':\n                      typeof resolvedItemPadding === 'number'\n                        ? `${resolvedItemPadding}px`\n                        : resolvedItemPadding,\n                  }),\n              ...style,\n            },\n          )}\n          onFormSubmit={async (values, eventDetails) => {\n            onFormSubmit?.(values, eventDetails);\n            if (!onFinish) return;\n            setSubmitLoading(true);\n            try {\n              await onFinish(values, eventDetails);\n              snapshotRef.current = serializeForm(formRef.current);\n              syncUnsaved();\n            } finally {\n              setSubmitLoading(false);\n            }\n          }}\n          {...rest}\n        >\n          {items && items.length > 0 ? (\n            itemsType === 'group' ? (\n              (items as FormGroupItemType[]).map((item, i) => mapTree(item, i))\n            ) : (\n              <FormFlatGroup\n                className={classNames?.group}\n                style={customStyles?.group}\n                variant={variant}\n              >\n                {(items as FormFieldProps[])\n                  .filter((item) => !item.hidden)\n                  .map((item, i) => mapFlat(item, i))}\n              </FormFlatGroup>\n            )\n          ) : undefined}\n          {children}\n          {footer}\n        </BaseForm>\n      </FormContext>\n    );\n  },\n);\n\nForm.displayName = 'Form';\n\nexport default Form;\n"],"mappings":"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"}

package/es/Form/style.mjs

@@ -1,11 +1,11 @@
 //#region src/Form/style.ts
 const rootStyles = {
 	borderless: {
-		kOIVth: "lb1y9zxd1 lb1q0xmy4",
+		kOIVth: "lb1y9zxd1 lbcptdvr",
 		$$css: true
 	},
 	root: {
-		kOIVth: "lbou54vl lb1q0xmy4",
+		kOIVth: "lbou54vl lbcptdvr",
 		k1xSpc: "lb78zum5",
 		kXwgrk: "lbdt5ytf",
 		kVAEAm: "lb1n2onr6",
@@ -47,7 +47,7 @@ const fieldStyles = {
 	},
 	root: {
 		kOIVth: "lb1v2ro7d",
-		k8WAf4: "lb1xn8qrt",
+		k8WAf4: "lby0ca47",
 		kB7OPa: "lb9f619",
 		k1xSpc: "lb78zum5",
 		kzqmXN: "lbh8yej3",

package/es/Form/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Form/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { media } from '@/styles/stylex/media.stylex';\n\nimport { formGroupTriggerMarker, formMarker } from './marker.stylex';\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\n\nexport const rootStyles = stylex.create({\n  borderless: {\n    gap: { default: 48, [media.sm]: '0 !important' },\n  },\n  root: {\n    gap: { default: 16, [media.sm]: '0 !important' },\n    display: 'flex',\n    flexDirection: 'column',\n    position: 'relative',\n    width: '100%',\n  },\n});\n\nexport const fieldStyles = stylex.create({\n  control: {\n    gap: 4,\n    alignItems: 'flex-end',\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: 'var(--form-field-min-width, unset)',\n  },\n  controlVertical: {\n    alignItems: 'stretch',\n    width: '100%',\n  },\n  error: {\n    color: cssVar.colorError,\n    fontSize: 12,\n  },\n  horizontal: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n  },\n  label: {\n    flex: '1',\n    display: 'block',\n    textAlign: 'start',\n    maxWidth: '100%',\n  },\n  root: {\n    gap: 12,\n    paddingBlock: 16,\n    boxSizing: 'border-box',\n    display: 'flex',\n    width: '100%',\n  },\n  vertical: {\n    gap: 8,\n    alignItems: 'stretch',\n    flexDirection: 'column',\n  },\n});\n\nexport const fieldLayoutStyles = {\n  horizontal: fieldStyles.horizontal,\n  vertical: fieldStyles.vertical,\n};\n\nexport const dividerStyles = stylex.create({\n  root: {\n    margin: 0,\n    borderColor: 'currentcolor',\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    backgroundColor: cssVar.colorBorderSecondary,\n    height: 1,\n    width: '100%',\n  },\n});\n\nexport const groupStyles = stylex.create({\n  body: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  bodyBoxed: {\n    paddingBlock: { default: 16, [stylex.when.ancestor(':is(*)', formMarker)]: 0 },\n    paddingInline: 16,\n  },\n  bodyFilled: {\n    borderRadius: cssVar.borderRadius,\n    marginInline: 3,\n    marginBlockEnd: 3,\n  },\n  bodyFilledLight: {\n    boxShadow: `0 1px 0 -1px ${cssVar.colorBorder}, 0 1px 2px -0.5px ${cssVar.colorBorder}, 0 2px 2px -1px ${cssVar.colorBorderSecondary}, 0 3px 6px -4px ${cssVar.colorBorderSecondary}`,\n  },\n  chevron: {\n    flex: 'none',\n    transition: `transform 200ms ${cssVar.motionEaseOut}`,\n    color: cssVar.colorTextDescription,\n    transform: {\n      default: null,\n      [stylex.when.ancestor('[data-panel-open]', formGroupTriggerMarker)]: 'rotate(180deg)',\n    },\n  },\n  desc: {\n    color: cssVar.colorTextDescription,\n    fontSize: 12,\n    fontWeight: 400,\n  },\n  header: {\n    gap: 12,\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'space-between',\n    width: '100%',\n  },\n  headerBorderless: {\n    borderBlockEndColor: cssVar.colorBorderSecondary,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n    paddingBlockEnd: 16,\n  },\n  headerBoxed: {\n    padding: 16,\n  },\n  mobileBody: {\n    paddingBlock: 0,\n    paddingInline: 16,\n    backgroundColor: cssVar.colorBgContainer,\n  },\n  mobileHeader: {\n    padding: 16,\n    backgroundColor: cssVar.colorBgLayout,\n  },\n  mobileTitle: {\n    fontSize: 14,\n    fontWeight: 400,\n    opacity: 0.5,\n  },\n  panel: {\n    overflow: 'hidden',\n    transition: `height 200ms ${cssVar.motionEaseOut}`,\n    transitionDuration: { default: null, [reducedMotion]: '0s' },\n    height: {\n      'default': 'var(--collapsible-panel-height)',\n      ':is([data-starting-style], [data-ending-style])': 0,\n    },\n  },\n  rootFilled: {\n    borderRadius: cssVar.borderRadiusLG,\n    backgroundColor: cssVar.colorFillQuaternary,\n  },\n  rootFilledDark: {\n    backgroundColor: cssVar.colorBgLayout,\n  },\n  rootOutlined: {\n    borderRadius: cssVar.borderRadiusLG,\n  },\n  title: {\n    gap: 8,\n    alignItems: 'center',\n    color: cssVar.colorText,\n    display: 'flex',\n    flexShrink: 0,\n    fontSize: 16,\n    fontWeight: 'bold',\n  },\n  titleBorderless: {\n    fontSize: 18,\n  },\n  trigger: {\n    margin: 0,\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderRadius: cssVar.borderRadius,\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    flex: '1',\n    gap: 12,\n    outline: 'none',\n    alignItems: 'center',\n    backgroundColor: 'transparent',\n    backgroundImage: 'none',\n    cursor: 'pointer',\n    display: 'flex',\n    textAlign: 'start',\n  },\n});\n\nexport const flatGroupStyles = stylex.create({\n  borderless: {\n    paddingInline: 0,\n  },\n  filled: {\n    backgroundColor: cssVar.colorFillQuaternary,\n  },\n  mobile: {\n    borderRadius: 0,\n    paddingBlock: 0,\n    paddingInline: 16,\n    backgroundColor: cssVar.colorBgContainer,\n  },\n  root: {\n    borderRadius: cssVar.borderRadiusLG,\n    paddingInline: 16,\n  },\n});\n\nexport const footerStyles = stylex.create({\n  root: {\n    padding: { default: null, [media.sm]: 16 },\n    backgroundColor: { default: null, [media.sm]: cssVar.colorBgContainer },\n    borderBlockStartColor: { default: null, [media.sm]: cssVar.colorBorderSecondary },\n    borderBlockStartStyle: { default: null, [media.sm]: 'solid' },\n    borderBlockStartWidth: { default: null, [media.sm]: 1 },\n  },\n});\n\nexport const submitFooterStyles = stylex.create({\n  floatFooter: {\n    padding: 8,\n    borderColor: cssVar.colorBorderSecondary,\n    borderRadius: 48,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: cssVar.colorBgContainer,\n    boxShadow: cssVar.boxShadowSecondary,\n    insetBlockEnd: 24,\n    insetInlineStart: '50%',\n    position: 'fixed',\n    transform: 'translateX(-50%)',\n    zIndex: 1000,\n    width: 'max-content',\n  },\n  footer: {\n    padding: { default: null, [media.sm]: 16 },\n    backgroundColor: { default: null, [media.sm]: cssVar.colorBgContainer },\n    borderBlockStartColor: { default: null, [media.sm]: cssVar.colorBorderSecondary },\n    borderBlockStartStyle: { default: null, [media.sm]: 'solid' },\n    borderBlockStartWidth: { default: null, [media.sm]: 1 },\n    marginBlockStart: { default: null, [media.sm]: `calc(-1 * ${cssVar.borderRadius})` },\n  },\n});\n\nexport const titleStyles = stylex.create({\n  content: {\n    position: 'relative',\n    textAlign: 'start',\n  },\n  desc: {\n    color: cssVar.colorTextDescription,\n    display: 'block',\n    fontSize: 12,\n    fontWeight: 400,\n    lineHeight: 1.44,\n    overflowWrap: 'break-word',\n    whiteSpace: 'pre-wrap',\n  },\n  title: {\n    color: cssVar.colorText,\n    fontWeight: 500,\n    lineHeight: 1,\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Form/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { media } from '@/styles/stylex/media.stylex';\n\nimport { formGroupTriggerMarker, formMarker } from './marker.stylex';\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\n\nexport const rootStyles = stylex.create({\n  borderless: {\n    gap: { default: 48, [media.sm]: 'var(--lobe-form-gap, 0) !important' },\n  },\n  root: {\n    gap: { default: 16, [media.sm]: 'var(--lobe-form-gap, 0) !important' },\n    display: 'flex',\n    flexDirection: 'column',\n    position: 'relative',\n    width: '100%',\n  },\n});\n\nexport const fieldStyles = stylex.create({\n  control: {\n    gap: 4,\n    alignItems: 'flex-end',\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: 'var(--form-field-min-width, unset)',\n  },\n  controlVertical: {\n    alignItems: 'stretch',\n    width: '100%',\n  },\n  error: {\n    color: cssVar.colorError,\n    fontSize: 12,\n  },\n  horizontal: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n  },\n  label: {\n    flex: '1',\n    display: 'block',\n    textAlign: 'start',\n    maxWidth: '100%',\n  },\n  root: {\n    gap: 12,\n    paddingBlock: 'var(--lobe-form-item-padding-block,16px)',\n    boxSizing: 'border-box',\n    display: 'flex',\n    width: '100%',\n  },\n  vertical: {\n    gap: 8,\n    alignItems: 'stretch',\n    flexDirection: 'column',\n  },\n});\n\nexport const fieldLayoutStyles = {\n  horizontal: fieldStyles.horizontal,\n  vertical: fieldStyles.vertical,\n};\n\nexport const dividerStyles = stylex.create({\n  root: {\n    margin: 0,\n    borderColor: 'currentcolor',\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    backgroundColor: cssVar.colorBorderSecondary,\n    height: 1,\n    width: '100%',\n  },\n});\n\nexport const groupStyles = stylex.create({\n  body: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  bodyBoxed: {\n    paddingBlock: { default: 16, [stylex.when.ancestor(':is(*)', formMarker)]: 0 },\n    paddingInline: 16,\n  },\n  bodyFilled: {\n    borderRadius: cssVar.borderRadius,\n    marginInline: 3,\n    marginBlockEnd: 3,\n  },\n  bodyFilledLight: {\n    boxShadow: `0 1px 0 -1px ${cssVar.colorBorder}, 0 1px 2px -0.5px ${cssVar.colorBorder}, 0 2px 2px -1px ${cssVar.colorBorderSecondary}, 0 3px 6px -4px ${cssVar.colorBorderSecondary}`,\n  },\n  chevron: {\n    flex: 'none',\n    transition: `transform 200ms ${cssVar.motionEaseOut}`,\n    color: cssVar.colorTextDescription,\n    transform: {\n      default: null,\n      [stylex.when.ancestor('[data-panel-open]', formGroupTriggerMarker)]: 'rotate(180deg)',\n    },\n  },\n  desc: {\n    color: cssVar.colorTextDescription,\n    fontSize: 12,\n    fontWeight: 400,\n  },\n  header: {\n    gap: 12,\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'space-between',\n    width: '100%',\n  },\n  headerBorderless: {\n    borderBlockEndColor: cssVar.colorBorderSecondary,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n    paddingBlockEnd: 16,\n  },\n  headerBoxed: {\n    padding: 16,\n  },\n  mobileBody: {\n    paddingBlock: 0,\n    paddingInline: 16,\n    backgroundColor: cssVar.colorBgContainer,\n  },\n  mobileHeader: {\n    padding: 16,\n    backgroundColor: cssVar.colorBgLayout,\n  },\n  mobileTitle: {\n    fontSize: 14,\n    fontWeight: 400,\n    opacity: 0.5,\n  },\n  panel: {\n    overflow: 'hidden',\n    transition: `height 200ms ${cssVar.motionEaseOut}`,\n    transitionDuration: { default: null, [reducedMotion]: '0s' },\n    height: {\n      'default': 'var(--collapsible-panel-height)',\n      ':is([data-starting-style], [data-ending-style])': 0,\n    },\n  },\n  rootFilled: {\n    borderRadius: cssVar.borderRadiusLG,\n    backgroundColor: cssVar.colorFillQuaternary,\n  },\n  rootFilledDark: {\n    backgroundColor: cssVar.colorBgLayout,\n  },\n  rootOutlined: {\n    borderRadius: cssVar.borderRadiusLG,\n  },\n  title: {\n    gap: 8,\n    alignItems: 'center',\n    color: cssVar.colorText,\n    display: 'flex',\n    flexShrink: 0,\n    fontSize: 16,\n    fontWeight: 'bold',\n  },\n  titleBorderless: {\n    fontSize: 18,\n  },\n  trigger: {\n    margin: 0,\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderRadius: cssVar.borderRadius,\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    flex: '1',\n    gap: 12,\n    outline: 'none',\n    alignItems: 'center',\n    backgroundColor: 'transparent',\n    backgroundImage: 'none',\n    cursor: 'pointer',\n    display: 'flex',\n    textAlign: 'start',\n  },\n});\n\nexport const flatGroupStyles = stylex.create({\n  borderless: {\n    paddingInline: 0,\n  },\n  filled: {\n    backgroundColor: cssVar.colorFillQuaternary,\n  },\n  mobile: {\n    borderRadius: 0,\n    paddingBlock: 0,\n    paddingInline: 16,\n    backgroundColor: cssVar.colorBgContainer,\n  },\n  root: {\n    borderRadius: cssVar.borderRadiusLG,\n    paddingInline: 16,\n  },\n});\n\nexport const footerStyles = stylex.create({\n  root: {\n    padding: { default: null, [media.sm]: 16 },\n    backgroundColor: { default: null, [media.sm]: cssVar.colorBgContainer },\n    borderBlockStartColor: { default: null, [media.sm]: cssVar.colorBorderSecondary },\n    borderBlockStartStyle: { default: null, [media.sm]: 'solid' },\n    borderBlockStartWidth: { default: null, [media.sm]: 1 },\n  },\n});\n\nexport const submitFooterStyles = stylex.create({\n  floatFooter: {\n    padding: 8,\n    borderColor: cssVar.colorBorderSecondary,\n    borderRadius: 48,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: cssVar.colorBgContainer,\n    boxShadow: cssVar.boxShadowSecondary,\n    insetBlockEnd: 24,\n    insetInlineStart: '50%',\n    position: 'fixed',\n    transform: 'translateX(-50%)',\n    zIndex: 1000,\n    width: 'max-content',\n  },\n  footer: {\n    padding: { default: null, [media.sm]: 16 },\n    backgroundColor: { default: null, [media.sm]: cssVar.colorBgContainer },\n    borderBlockStartColor: { default: null, [media.sm]: cssVar.colorBorderSecondary },\n    borderBlockStartStyle: { default: null, [media.sm]: 'solid' },\n    borderBlockStartWidth: { default: null, [media.sm]: 1 },\n    marginBlockStart: { default: null, [media.sm]: `calc(-1 * ${cssVar.borderRadius})` },\n  },\n});\n\nexport const titleStyles = stylex.create({\n  content: {\n    position: 'relative',\n    textAlign: 'start',\n  },\n  desc: {\n    color: cssVar.colorTextDescription,\n    display: 'block',\n    fontSize: 12,\n    fontWeight: 400,\n    lineHeight: 1.44,\n    overflowWrap: 'break-word',\n    whiteSpace: 'pre-wrap',\n  },\n  title: {\n    color: cssVar.colorText,\n    fontWeight: 500,\n    lineHeight: 1,\n  },\n});\n"],"mappings":"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"}

package/es/Form/type.d.mts

@@ -24,6 +24,11 @@ export interface FormProps extends BaseFormProps {
     item?: string;
   };
   collapsible?: boolean;
+  /**
+   * Compact spacing for narrow containers (Drawer / Modal): `gap` 12px and `itemPadding` 10px
+   * unless set explicitly. Default `false` (unchanged spacing).
+   */
+  compact?: boolean;
   defaultActiveKey?: (string | number)[];
   footer?: ReactNode;
   gap?: number | string;
@@ -33,6 +38,8 @@ export interface FormProps extends BaseFormProps {
    */
   initialValues?: FormValues;
   itemMinWidth?: FormFieldProps['minWidth'];
+  /** Block (top / bottom) padding of every Form.Field. Default `16px`. */
+  itemPadding?: number | string;
   items?: FormGroupItemType[] | FormFieldProps[];
   itemsType?: ItemsType;
   layout?: FormLayout;
@@ -138,4 +145,5 @@ export interface FormContextValue {
   variant: FormVariant;
 }
 //#endregion
+export {};
 //# sourceMappingURL=type.d.mts.map

package/es/FormKit/List.mjs

@@ -9,7 +9,7 @@ import { useStoreSelector } from "./useStoreSelector.mjs";
 import FormField from "./Field.mjs";
 import { cloneElement, createElement, memo, useCallback, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { PlusIcon, XIcon } from "lucide-react";
 //#region src/FormKit/List.tsx
@@ -77,7 +77,7 @@ const FormList = memo(({ addText, children, columns, emptyText, name, newItem })
 			key: field.key,
 			style: { gridTemplateColumns }
 		}, columns.map((column) => /* @__PURE__ */ jsx("div", {
-			className: clsx("lobe-form-list-cell", stylex.props(listStyles.cell).className),
+			className: clsx$1("lobe-form-list-cell", stylex.props(listStyles.cell).className),
 			children: /* @__PURE__ */ jsx(FormField, {
 				bare: true,
 				name: `${field.name}.${column.name}`,

package/es/FormKit/List.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"List.mjs","names":["formMessages"],"sources":["../../src/FormKit/List.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { PlusIcon, XIcon } from 'lucide-react';\nimport { cloneElement, memo, type ReactElement, type ReactNode, useCallback, useRef } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport formMessages from '@/i18n/resources/en/form';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport { useFormKitContext } from './context';\nimport FormField from './Field';\nimport { getInternals } from './instance';\nimport type { FieldValidate } from './schema';\nimport { listStyles } from './style';\nimport { useStoreSelector } from './useStoreSelector';\n\nexport interface FormListField {\n  index: number;\n  key: string;\n  name: string;\n}\n\nexport interface FormListRenderProps {\n  add: (item?: unknown) => void;\n  fields: FormListField[];\n  move: (from: number, to: number) => void;\n  remove: (index: number) => void;\n}\n\nexport interface FormListColumn {\n  children: ReactElement;\n  flex?: number;\n  name: string;\n  required?: boolean | string;\n  title?: ReactNode;\n  validate?: FieldValidate;\n}\n\nexport interface FormListProps {\n  addText?: ReactNode;\n  children?: (props: FormListRenderProps) => ReactNode;\n  columns?: FormListColumn[];\n  emptyText?: ReactNode;\n  name: string;\n  newItem?: unknown;\n}\n\nlet rowSeed = 0;\nconst nextRowKey = () => `row-${(rowSeed += 1)}`;\n\nconst createItem = (newItem: unknown) =>\n  typeof newItem === 'function'\n    ? newItem()\n    : newItem && typeof newItem === 'object'\n      ? structuredClone(newItem)\n      : (newItem ?? {});\n\nconst labelFor = (column: FormListColumn, index: number) =>\n  (column.children as ReactElement<{ 'aria-label'?: string }>).props['aria-label'] ??\n  (typeof column.title === 'string' ? `${column.title} ${index + 1}` : undefined);\n\nconst FormList = memo<FormListProps>(({ addText, children, columns, emptyText, name, newItem }) => {\n  const { form } = useFormKitContext();\n  const { engine } = getInternals(form);\n  const { t } = useTranslation(formMessages);\n  const length = useStoreSelector(engine, (e) => {\n    const value = e.getValue(name);\n    return Array.isArray(value) ? value.length : 0;\n  });\n\n  const keysRef = useRef<string[]>([]);\n  const keys = keysRef.current;\n  if (keys.length > length) keys.length = length;\n  while (keys.length < length) keys.push(nextRowKey());\n\n  const add = useCallback(\n    (item?: unknown) => {\n      keysRef.current.push(nextRowKey());\n      engine.pushItem(name, item);\n    },\n    [engine, name],\n  );\n  const remove = useCallback(\n    (index: number) => {\n      keysRef.current.splice(index, 1);\n      engine.removeItem(name, index);\n    },\n    [engine, name],\n  );\n  const move = useCallback(\n    (from: number, to: number) => {\n      const [moved] = keysRef.current.splice(from, 1);\n      keysRef.current.splice(to, 0, moved);\n      engine.moveItem(name, from, to);\n    },\n    [engine, name],\n  );\n\n  const fields = keys.map((key, index) => ({ index, key, name: `${name}.${index}` }));\n\n  if (children || !columns) return <>{children?.({ add, fields, move, remove })}</>;\n\n  const gridTemplateColumns = `${columns.map((c) => `minmax(0, ${c.flex ?? 1}fr)`).join(' ')} 36px`;\n  const addButton = (\n    <button\n      {...stylex.props(listStyles.add)}\n      type=\"button\"\n      onClick={() => add(createItem(newItem))}\n    >\n      <PlusIcon size={14} />\n      {addText ?? t('form.list.add')}\n    </button>\n  );\n\n  return (\n    <div {...stylex.props(listStyles.table)}>\n      <div {...stylex.props(listStyles.head)} style={{ gridTemplateColumns }}>\n        {columns.map((column) => (\n          <div {...stylex.props(listStyles.title)} key={column.name}>\n            {column.title}\n          </div>\n        ))}\n      </div>\n      {fields.length === 0 ? (\n        <div {...stylex.props(listStyles.empty)}>\n          <span>{emptyText ?? t('form.list.empty')}</span>\n          {addButton}\n        </div>\n      ) : (\n        <>\n          {fields.map((field) => (\n            <div {...stylex.props(listStyles.row)} key={field.key} style={{ gridTemplateColumns }}>\n              {columns.map((column) => (\n                <div\n                  className={clsx('lobe-form-list-cell', stylex.props(listStyles.cell).className)}\n                  key={column.name}\n                >\n                  <FormField\n                    bare\n                    name={`${field.name}.${column.name}`}\n                    required={column.required}\n                    validate={column.validate}\n                  >\n                    {cloneElement(column.children as ReactElement<any>, {\n                      'aria-label': labelFor(column, field.index),\n                    })}\n                  </FormField>\n                </div>\n              ))}\n              <ActionIcon\n                {...stylex.props(listStyles.remove)}\n                aria-label={t('form.list.remove')}\n                icon={XIcon}\n                size={'small'}\n                title={t('form.list.remove')}\n                onClick={() => remove(field.index)}\n              />\n            </div>\n          ))}\n          <div {...stylex.props(listStyles.foot)}>{addButton}</div>\n        </>\n      )}\n    </div>\n  );\n});\n\nFormList.displayName = 'FormList';\n\nexport default FormList;\n"],"mappings":"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"}
+{"version":3,"file":"List.mjs","names":["formMessages","clsx"],"sources":["../../src/FormKit/List.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { PlusIcon, XIcon } from 'lucide-react';\nimport { cloneElement, memo, type ReactElement, type ReactNode, useCallback, useRef } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport formMessages from '@/i18n/resources/en/form';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport { useFormKitContext } from './context';\nimport FormField from './Field';\nimport { getInternals } from './instance';\nimport type { FieldValidate } from './schema';\nimport { listStyles } from './style';\nimport { useStoreSelector } from './useStoreSelector';\n\nexport interface FormListField {\n  index: number;\n  key: string;\n  name: string;\n}\n\nexport interface FormListRenderProps {\n  add: (item?: unknown) => void;\n  fields: FormListField[];\n  move: (from: number, to: number) => void;\n  remove: (index: number) => void;\n}\n\nexport interface FormListColumn {\n  children: ReactElement;\n  flex?: number;\n  name: string;\n  required?: boolean | string;\n  title?: ReactNode;\n  validate?: FieldValidate;\n}\n\nexport interface FormListProps {\n  addText?: ReactNode;\n  children?: (props: FormListRenderProps) => ReactNode;\n  columns?: FormListColumn[];\n  emptyText?: ReactNode;\n  name: string;\n  newItem?: unknown;\n}\n\nlet rowSeed = 0;\nconst nextRowKey = () => `row-${(rowSeed += 1)}`;\n\nconst createItem = (newItem: unknown) =>\n  typeof newItem === 'function'\n    ? newItem()\n    : newItem && typeof newItem === 'object'\n      ? structuredClone(newItem)\n      : (newItem ?? {});\n\nconst labelFor = (column: FormListColumn, index: number) =>\n  (column.children as ReactElement<{ 'aria-label'?: string }>).props['aria-label'] ??\n  (typeof column.title === 'string' ? `${column.title} ${index + 1}` : undefined);\n\nconst FormList = memo<FormListProps>(({ addText, children, columns, emptyText, name, newItem }) => {\n  const { form } = useFormKitContext();\n  const { engine } = getInternals(form);\n  const { t } = useTranslation(formMessages);\n  const length = useStoreSelector(engine, (e) => {\n    const value = e.getValue(name);\n    return Array.isArray(value) ? value.length : 0;\n  });\n\n  const keysRef = useRef<string[]>([]);\n  const keys = keysRef.current;\n  if (keys.length > length) keys.length = length;\n  while (keys.length < length) keys.push(nextRowKey());\n\n  const add = useCallback(\n    (item?: unknown) => {\n      keysRef.current.push(nextRowKey());\n      engine.pushItem(name, item);\n    },\n    [engine, name],\n  );\n  const remove = useCallback(\n    (index: number) => {\n      keysRef.current.splice(index, 1);\n      engine.removeItem(name, index);\n    },\n    [engine, name],\n  );\n  const move = useCallback(\n    (from: number, to: number) => {\n      const [moved] = keysRef.current.splice(from, 1);\n      keysRef.current.splice(to, 0, moved);\n      engine.moveItem(name, from, to);\n    },\n    [engine, name],\n  );\n\n  const fields = keys.map((key, index) => ({ index, key, name: `${name}.${index}` }));\n\n  if (children || !columns) return <>{children?.({ add, fields, move, remove })}</>;\n\n  const gridTemplateColumns = `${columns.map((c) => `minmax(0, ${c.flex ?? 1}fr)`).join(' ')} 36px`;\n  const addButton = (\n    <button\n      {...stylex.props(listStyles.add)}\n      type=\"button\"\n      onClick={() => add(createItem(newItem))}\n    >\n      <PlusIcon size={14} />\n      {addText ?? t('form.list.add')}\n    </button>\n  );\n\n  return (\n    <div {...stylex.props(listStyles.table)}>\n      <div {...stylex.props(listStyles.head)} style={{ gridTemplateColumns }}>\n        {columns.map((column) => (\n          <div {...stylex.props(listStyles.title)} key={column.name}>\n            {column.title}\n          </div>\n        ))}\n      </div>\n      {fields.length === 0 ? (\n        <div {...stylex.props(listStyles.empty)}>\n          <span>{emptyText ?? t('form.list.empty')}</span>\n          {addButton}\n        </div>\n      ) : (\n        <>\n          {fields.map((field) => (\n            <div {...stylex.props(listStyles.row)} key={field.key} style={{ gridTemplateColumns }}>\n              {columns.map((column) => (\n                <div\n                  className={clsx('lobe-form-list-cell', stylex.props(listStyles.cell).className)}\n                  key={column.name}\n                >\n                  <FormField\n                    bare\n                    name={`${field.name}.${column.name}`}\n                    required={column.required}\n                    validate={column.validate}\n                  >\n                    {cloneElement(column.children as ReactElement<any>, {\n                      'aria-label': labelFor(column, field.index),\n                    })}\n                  </FormField>\n                </div>\n              ))}\n              <ActionIcon\n                {...stylex.props(listStyles.remove)}\n                aria-label={t('form.list.remove')}\n                icon={XIcon}\n                size={'small'}\n                title={t('form.list.remove')}\n                onClick={() => remove(field.index)}\n              />\n            </div>\n          ))}\n          <div {...stylex.props(listStyles.foot)}>{addButton}</div>\n        </>\n      )}\n    </div>\n  );\n});\n\nFormList.displayName = 'FormList';\n\nexport default FormList;\n"],"mappings":"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"}

package/es/FormKit/engine/tanstack.mjs

@@ -1,5 +1,5 @@
+import { isEqual } from "es-toolkit/compat";
 import { FormApi, getBy, setBy } from "@tanstack/form-core";
-import isEqual from "fast-deep-equal";
 //#region src/FormKit/engine/tanstack.ts
 const toEnginePath = (path) => path.replaceAll(/\.(\d+)(?=\.|$)/g, "[$1]");
 const isSameOrNested = (a, b) => a === b || a.startsWith(`${b}.`) || b.startsWith(`${a}.`);

package/es/FormKit/engine/tanstack.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tanstack.mjs","names":[],"sources":["../../../src/FormKit/engine/tanstack.ts"],"sourcesContent":["import { FormApi, getBy, setBy } from '@tanstack/form-core';\nimport isEqual from 'fast-deep-equal';\n\nimport type {\n  ChangeSource,\n  CreateEngine,\n  FieldRegistration,\n  FieldSnapshot,\n  FormEngine,\n  FormStatus,\n  FormValidator,\n  ValidateResult,\n  ValidateTrigger,\n  ValueChange,\n} from './types';\n\nconst toEnginePath = (path: string) => path.replaceAll(/\\.(\\d+)(?=\\.|$)/g, '[$1]');\n\nconst isSameOrNested = (a: string, b: string) =>\n  a === b || a.startsWith(`${b}.`) || b.startsWith(`${a}.`);\n\nconst isUnder = (path: string, root: string) => path === root || path.startsWith(`${root}.`);\n\ninterface FieldRuntime {\n  registration: FieldRegistration;\n  timer?: ReturnType<typeof setTimeout>;\n  token: number;\n}\n\nexport const createTanstackEngine: CreateEngine = (initialValues) => {\n  const form = new FormApi({ defaultValues: initialValues });\n\n  const fields = new Map<string, FieldRuntime>();\n  const fieldErrors = new Map<string, string>();\n  const formErrors = new Map<string, string>();\n  const serverErrors = new Map<string, string>();\n  const validating = new Set<string>();\n  const touched = new Set<string>();\n  const listeners = new Set<() => void>();\n  const valueListeners = new Set<(change: ValueChange) => void>();\n  const snapshots = new Map<string, FieldSnapshot>();\n\n  let formValidator: FormValidator | undefined;\n  let baseline = initialValues;\n  let dirtyCache: { baseline: unknown; dirty: boolean; values: unknown } | undefined;\n  let inflightSubmit: Promise<ValidateResult> | undefined;\n  let submitting = false;\n  let submitCount = 0;\n  let status: FormStatus = { dirty: false, submitCount: 0, submitting: false };\n\n  const notify = () => {\n    for (const listener of listeners) listener();\n  };\n  const storeSubscription = form.store.subscribe(notify);\n\n  const getValue = (path: string) => form.getFieldValue(toEnginePath(path) as never) as unknown;\n  const getValues = () => form.state.values as Record<string, unknown>;\n  const isTouched = (path: string) => {\n    for (const entry of touched) if (isSameOrNested(entry, path)) return true;\n    return false;\n  };\n  const errorOf = (path: string) =>\n    serverErrors.get(path) ?? fieldErrors.get(path) ?? formErrors.get(path);\n\n  const getField = (path: string): FieldSnapshot => {\n    const next: FieldSnapshot = {\n      error: errorOf(path),\n      touched: isTouched(path),\n      validating: validating.has(path),\n      value: getValue(path),\n    };\n    const prev = snapshots.get(path);\n    if (\n      prev &&\n      prev.error === next.error &&\n      prev.touched === next.touched &&\n      prev.validating === next.validating &&\n      Object.is(prev.value, next.value)\n    )\n      return prev;\n    snapshots.set(path, next);\n    return next;\n  };\n\n  const getStatus = (): FormStatus => {\n    const values = getValues();\n    if (dirtyCache?.values !== values || dirtyCache.baseline !== baseline)\n      dirtyCache = { baseline, dirty: !isEqual(values, baseline), values };\n    const { dirty } = dirtyCache;\n    if (\n      status.dirty !== dirty ||\n      status.submitting !== submitting ||\n      status.submitCount !== submitCount\n    )\n      status = { dirty, submitCount, submitting };\n    return status;\n  };\n\n  const shouldValidate = (path: string, trigger: ValidateTrigger) => {\n    const mode = fields.get(path)?.registration.validateOn ?? 'auto';\n    if (trigger === 'submit') return true;\n    if (mode === 'change') return true;\n    if (mode === 'blur') return trigger === 'blur';\n    if (mode === 'submit') return false;\n    return trigger === 'blur' || errorOf(path) !== undefined;\n  };\n\n  const setOrDelete = (map: Map<string, string>, path: string, error: string | undefined) => {\n    if (error === undefined) map.delete(path);\n    else map.set(path, error);\n  };\n\n  const runField = (path: string, withFormValidator: boolean): Promise<void> => {\n    const runtime = fields.get(path);\n    if (!runtime) return Promise.resolve();\n    runtime.token += 1;\n    const token = runtime.token;\n    const { validate } = runtime.registration;\n    if (!validate && !(withFormValidator && formValidator)) return Promise.resolve();\n\n    validating.add(path);\n    notify();\n    return (async () => {\n      const values = getValues();\n      const [fieldError, formResult] = await Promise.all([\n        validate?.(getValue(path), values),\n        withFormValidator ? formValidator?.(values) : undefined,\n      ]);\n      if (runtime.token !== token || fields.get(path) !== runtime) return;\n      setOrDelete(fieldErrors, path, fieldError);\n      if (withFormValidator) setOrDelete(formErrors, path, formResult?.[path]);\n      validating.delete(path);\n      notify();\n    })();\n  };\n\n  const schedule = (path: string, trigger: ValidateTrigger) => {\n    const runtime = fields.get(path);\n    if (!runtime || !shouldValidate(path, trigger)) return;\n    clearTimeout(runtime.timer);\n    const debounceMs = runtime.registration.debounceMs ?? 0;\n    if (trigger === 'change' && debounceMs > 0) {\n      runtime.token += 1;\n      runtime.timer = setTimeout(() => void runField(path, true), debounceMs);\n      return;\n    }\n    void runField(path, true);\n  };\n\n  const clearErrorsUnder = (path: string, inclusive = false) => {\n    for (const map of [fieldErrors, formErrors, serverErrors])\n      for (const key of map.keys())\n        if (inclusive ? isUnder(key, path) : key.startsWith(`${path}.`)) map.delete(key);\n  };\n\n  const resetTo = (values: Record<string, unknown>) => {\n    clearRuntimeState();\n    baseline = values;\n    form.reset(values);\n    notify();\n  };\n\n  const emitValueChange = (path: string, source: ChangeSource) => {\n    for (const listener of valueListeners) listener({ path, source });\n  };\n\n  const afterUserChange = (path: string) => {\n    touched.add(path);\n    serverErrors.delete(path);\n    schedule(path, 'change');\n    for (const [other, runtime] of fields) {\n      if (other !== path && runtime.registration.deps?.includes(path) && isTouched(other))\n        void runField(other, true);\n    }\n    notify();\n  };\n\n  const validate = async (paths?: string[]): Promise<ValidateResult> => {\n    const values = getValues();\n    const formResult = (formValidator ? await formValidator(values) : undefined) ?? {};\n    const targets = paths ?? [...new Set([...fields.keys(), ...Object.keys(formResult)])];\n    await Promise.all(targets.map((path) => runField(path, false)));\n    for (const path of targets) setOrDelete(formErrors, path, formResult[path]);\n    notify();\n    const errors: Record<string, string> = {};\n    for (const path of targets) {\n      const error = errorOf(path);\n      if (error !== undefined) errors[path] = error;\n    }\n    return { errors, valid: Object.keys(errors).length === 0 };\n  };\n\n  const clearRuntimeState = () => {\n    for (const runtime of fields.values()) {\n      clearTimeout(runtime.timer);\n      runtime.token += 1;\n    }\n    fieldErrors.clear();\n    formErrors.clear();\n    serverErrors.clear();\n    validating.clear();\n    touched.clear();\n  };\n\n  const runSubmit = async (onSubmit?: (values: Record<string, unknown>) => unknown) => {\n    submitCount += 1;\n    serverErrors.clear();\n    for (const path of fields.keys()) touched.add(path);\n    let values: Record<string, unknown>;\n    let result: ValidateResult;\n    do {\n      values = getValues();\n      result = await validate();\n      // Async validators must finish against unchanged values before submission.\n    } while (values !== getValues());\n    if (!result.valid) {\n      notify();\n      return result;\n    }\n    submitting = true;\n    notify();\n    try {\n      await onSubmit?.(values);\n      if (serverErrors.size > 0) return { errors: Object.fromEntries(serverErrors), valid: false };\n      resetTo(getValues());\n    } finally {\n      submitting = false;\n      notify();\n    }\n    return result;\n  };\n\n  const engine: FormEngine = {\n    blurField: (path) => {\n      touched.add(path);\n      schedule(path, 'blur');\n      notify();\n    },\n    destroy: () => {\n      for (const runtime of fields.values()) clearTimeout(runtime.timer);\n      storeSubscription.unsubscribe();\n      listeners.clear();\n      valueListeners.clear();\n    },\n    getField,\n    getStatus,\n    getValue,\n    getValues,\n    isTouched,\n    moveItem: (path, from, to) => {\n      form.moveFieldValues(toEnginePath(path) as never, from, to);\n      touched.add(path);\n      clearErrorsUnder(path);\n      emitValueChange(path, 'user');\n      notify();\n    },\n    onValueChange: (listener) => {\n      valueListeners.add(listener);\n      return () => valueListeners.delete(listener);\n    },\n    pushItem: (path, item) => {\n      form.pushFieldValue(toEnginePath(path) as never, item as never);\n      touched.add(path);\n      emitValueChange(path, 'user');\n      notify();\n    },\n    registerField: (path, registration) => {\n      const runtime: FieldRuntime = { registration, token: 0 };\n      fields.set(path, runtime);\n      return () => {\n        if (fields.get(path) !== runtime) return;\n        clearTimeout(runtime.timer);\n        fields.delete(path);\n        fieldErrors.delete(path);\n        validating.delete(path);\n        snapshots.delete(path);\n        notify();\n      };\n    },\n    removeItem: (path, index) => {\n      void form.removeFieldValue(toEnginePath(path) as never, index);\n      touched.add(path);\n      clearErrorsUnder(path);\n      emitValueChange(path, 'user');\n      notify();\n    },\n    reset: (values) => resetTo(values ?? baseline),\n    resetField: (path) => {\n      for (const [key, runtime] of fields) {\n        if (!isUnder(key, path)) continue;\n        clearTimeout(runtime.timer);\n        runtime.token += 1;\n        validating.delete(key);\n      }\n      for (const entry of touched) if (isUnder(entry, path)) touched.delete(entry);\n      clearErrorsUnder(path, true);\n      form.setFieldValue(toEnginePath(path) as never, getBy(baseline, toEnginePath(path)), {\n        dontUpdateMeta: true,\n      });\n      emitValueChange(path, 'api');\n      notify();\n    },\n    setErrors: (errors) => {\n      for (const [path, error] of Object.entries(errors)) setOrDelete(serverErrors, path, error);\n      notify();\n    },\n    setFormValidator: (validator) => {\n      formValidator = validator;\n    },\n    setValue: (path, value, source) => {\n      form.setFieldValue(toEnginePath(path) as never, value as never, { dontUpdateMeta: true });\n      if (source === 'api') baseline = setBy(baseline, toEnginePath(path), () => value);\n      emitValueChange(path, source);\n      if (source === 'user') afterUserChange(path);\n    },\n    submit: (onSubmit) => {\n      inflightSubmit ??= runSubmit(onSubmit).finally(() => {\n        inflightSubmit = undefined;\n      });\n      return inflightSubmit;\n    },\n    subscribe: (listener) => {\n      listeners.add(listener);\n      return () => listeners.delete(listener);\n    },\n    validate,\n  };\n\n  return engine;\n};\n"],"mappings":"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"}
+{"version":3,"file":"tanstack.mjs","names":[],"sources":["../../../src/FormKit/engine/tanstack.ts"],"sourcesContent":["import { FormApi, getBy, setBy } from '@tanstack/form-core';\nimport { isEqual } from 'es-toolkit/compat';\n\nimport type {\n  ChangeSource,\n  CreateEngine,\n  FieldRegistration,\n  FieldSnapshot,\n  FormEngine,\n  FormStatus,\n  FormValidator,\n  ValidateResult,\n  ValidateTrigger,\n  ValueChange,\n} from './types';\n\nconst toEnginePath = (path: string) => path.replaceAll(/\\.(\\d+)(?=\\.|$)/g, '[$1]');\n\nconst isSameOrNested = (a: string, b: string) =>\n  a === b || a.startsWith(`${b}.`) || b.startsWith(`${a}.`);\n\nconst isUnder = (path: string, root: string) => path === root || path.startsWith(`${root}.`);\n\ninterface FieldRuntime {\n  registration: FieldRegistration;\n  timer?: ReturnType<typeof setTimeout>;\n  token: number;\n}\n\nexport const createTanstackEngine: CreateEngine = (initialValues) => {\n  const form = new FormApi({ defaultValues: initialValues });\n\n  const fields = new Map<string, FieldRuntime>();\n  const fieldErrors = new Map<string, string>();\n  const formErrors = new Map<string, string>();\n  const serverErrors = new Map<string, string>();\n  const validating = new Set<string>();\n  const touched = new Set<string>();\n  const listeners = new Set<() => void>();\n  const valueListeners = new Set<(change: ValueChange) => void>();\n  const snapshots = new Map<string, FieldSnapshot>();\n\n  let formValidator: FormValidator | undefined;\n  let baseline = initialValues;\n  let dirtyCache: { baseline: unknown; dirty: boolean; values: unknown } | undefined;\n  let inflightSubmit: Promise<ValidateResult> | undefined;\n  let submitting = false;\n  let submitCount = 0;\n  let status: FormStatus = { dirty: false, submitCount: 0, submitting: false };\n\n  const notify = () => {\n    for (const listener of listeners) listener();\n  };\n  const storeSubscription = form.store.subscribe(notify);\n\n  const getValue = (path: string) => form.getFieldValue(toEnginePath(path) as never) as unknown;\n  const getValues = () => form.state.values as Record<string, unknown>;\n  const isTouched = (path: string) => {\n    for (const entry of touched) if (isSameOrNested(entry, path)) return true;\n    return false;\n  };\n  const errorOf = (path: string) =>\n    serverErrors.get(path) ?? fieldErrors.get(path) ?? formErrors.get(path);\n\n  const getField = (path: string): FieldSnapshot => {\n    const next: FieldSnapshot = {\n      error: errorOf(path),\n      touched: isTouched(path),\n      validating: validating.has(path),\n      value: getValue(path),\n    };\n    const prev = snapshots.get(path);\n    if (\n      prev &&\n      prev.error === next.error &&\n      prev.touched === next.touched &&\n      prev.validating === next.validating &&\n      Object.is(prev.value, next.value)\n    )\n      return prev;\n    snapshots.set(path, next);\n    return next;\n  };\n\n  const getStatus = (): FormStatus => {\n    const values = getValues();\n    if (dirtyCache?.values !== values || dirtyCache.baseline !== baseline)\n      dirtyCache = { baseline, dirty: !isEqual(values, baseline), values };\n    const { dirty } = dirtyCache;\n    if (\n      status.dirty !== dirty ||\n      status.submitting !== submitting ||\n      status.submitCount !== submitCount\n    )\n      status = { dirty, submitCount, submitting };\n    return status;\n  };\n\n  const shouldValidate = (path: string, trigger: ValidateTrigger) => {\n    const mode = fields.get(path)?.registration.validateOn ?? 'auto';\n    if (trigger === 'submit') return true;\n    if (mode === 'change') return true;\n    if (mode === 'blur') return trigger === 'blur';\n    if (mode === 'submit') return false;\n    return trigger === 'blur' || errorOf(path) !== undefined;\n  };\n\n  const setOrDelete = (map: Map<string, string>, path: string, error: string | undefined) => {\n    if (error === undefined) map.delete(path);\n    else map.set(path, error);\n  };\n\n  const runField = (path: string, withFormValidator: boolean): Promise<void> => {\n    const runtime = fields.get(path);\n    if (!runtime) return Promise.resolve();\n    runtime.token += 1;\n    const token = runtime.token;\n    const { validate } = runtime.registration;\n    if (!validate && !(withFormValidator && formValidator)) return Promise.resolve();\n\n    validating.add(path);\n    notify();\n    return (async () => {\n      const values = getValues();\n      const [fieldError, formResult] = await Promise.all([\n        validate?.(getValue(path), values),\n        withFormValidator ? formValidator?.(values) : undefined,\n      ]);\n      if (runtime.token !== token || fields.get(path) !== runtime) return;\n      setOrDelete(fieldErrors, path, fieldError);\n      if (withFormValidator) setOrDelete(formErrors, path, formResult?.[path]);\n      validating.delete(path);\n      notify();\n    })();\n  };\n\n  const schedule = (path: string, trigger: ValidateTrigger) => {\n    const runtime = fields.get(path);\n    if (!runtime || !shouldValidate(path, trigger)) return;\n    clearTimeout(runtime.timer);\n    const debounceMs = runtime.registration.debounceMs ?? 0;\n    if (trigger === 'change' && debounceMs > 0) {\n      runtime.token += 1;\n      runtime.timer = setTimeout(() => void runField(path, true), debounceMs);\n      return;\n    }\n    void runField(path, true);\n  };\n\n  const clearErrorsUnder = (path: string, inclusive = false) => {\n    for (const map of [fieldErrors, formErrors, serverErrors])\n      for (const key of map.keys())\n        if (inclusive ? isUnder(key, path) : key.startsWith(`${path}.`)) map.delete(key);\n  };\n\n  const resetTo = (values: Record<string, unknown>) => {\n    clearRuntimeState();\n    baseline = values;\n    form.reset(values);\n    notify();\n  };\n\n  const emitValueChange = (path: string, source: ChangeSource) => {\n    for (const listener of valueListeners) listener({ path, source });\n  };\n\n  const afterUserChange = (path: string) => {\n    touched.add(path);\n    serverErrors.delete(path);\n    schedule(path, 'change');\n    for (const [other, runtime] of fields) {\n      if (other !== path && runtime.registration.deps?.includes(path) && isTouched(other))\n        void runField(other, true);\n    }\n    notify();\n  };\n\n  const validate = async (paths?: string[]): Promise<ValidateResult> => {\n    const values = getValues();\n    const formResult = (formValidator ? await formValidator(values) : undefined) ?? {};\n    const targets = paths ?? [...new Set([...fields.keys(), ...Object.keys(formResult)])];\n    await Promise.all(targets.map((path) => runField(path, false)));\n    for (const path of targets) setOrDelete(formErrors, path, formResult[path]);\n    notify();\n    const errors: Record<string, string> = {};\n    for (const path of targets) {\n      const error = errorOf(path);\n      if (error !== undefined) errors[path] = error;\n    }\n    return { errors, valid: Object.keys(errors).length === 0 };\n  };\n\n  const clearRuntimeState = () => {\n    for (const runtime of fields.values()) {\n      clearTimeout(runtime.timer);\n      runtime.token += 1;\n    }\n    fieldErrors.clear();\n    formErrors.clear();\n    serverErrors.clear();\n    validating.clear();\n    touched.clear();\n  };\n\n  const runSubmit = async (onSubmit?: (values: Record<string, unknown>) => unknown) => {\n    submitCount += 1;\n    serverErrors.clear();\n    for (const path of fields.keys()) touched.add(path);\n    let values: Record<string, unknown>;\n    let result: ValidateResult;\n    do {\n      values = getValues();\n      result = await validate();\n      // Async validators must finish against unchanged values before submission.\n    } while (values !== getValues());\n    if (!result.valid) {\n      notify();\n      return result;\n    }\n    submitting = true;\n    notify();\n    try {\n      await onSubmit?.(values);\n      if (serverErrors.size > 0) return { errors: Object.fromEntries(serverErrors), valid: false };\n      resetTo(getValues());\n    } finally {\n      submitting = false;\n      notify();\n    }\n    return result;\n  };\n\n  const engine: FormEngine = {\n    blurField: (path) => {\n      touched.add(path);\n      schedule(path, 'blur');\n      notify();\n    },\n    destroy: () => {\n      for (const runtime of fields.values()) clearTimeout(runtime.timer);\n      storeSubscription.unsubscribe();\n      listeners.clear();\n      valueListeners.clear();\n    },\n    getField,\n    getStatus,\n    getValue,\n    getValues,\n    isTouched,\n    moveItem: (path, from, to) => {\n      form.moveFieldValues(toEnginePath(path) as never, from, to);\n      touched.add(path);\n      clearErrorsUnder(path);\n      emitValueChange(path, 'user');\n      notify();\n    },\n    onValueChange: (listener) => {\n      valueListeners.add(listener);\n      return () => valueListeners.delete(listener);\n    },\n    pushItem: (path, item) => {\n      form.pushFieldValue(toEnginePath(path) as never, item as never);\n      touched.add(path);\n      emitValueChange(path, 'user');\n      notify();\n    },\n    registerField: (path, registration) => {\n      const runtime: FieldRuntime = { registration, token: 0 };\n      fields.set(path, runtime);\n      return () => {\n        if (fields.get(path) !== runtime) return;\n        clearTimeout(runtime.timer);\n        fields.delete(path);\n        fieldErrors.delete(path);\n        validating.delete(path);\n        snapshots.delete(path);\n        notify();\n      };\n    },\n    removeItem: (path, index) => {\n      void form.removeFieldValue(toEnginePath(path) as never, index);\n      touched.add(path);\n      clearErrorsUnder(path);\n      emitValueChange(path, 'user');\n      notify();\n    },\n    reset: (values) => resetTo(values ?? baseline),\n    resetField: (path) => {\n      for (const [key, runtime] of fields) {\n        if (!isUnder(key, path)) continue;\n        clearTimeout(runtime.timer);\n        runtime.token += 1;\n        validating.delete(key);\n      }\n      for (const entry of touched) if (isUnder(entry, path)) touched.delete(entry);\n      clearErrorsUnder(path, true);\n      form.setFieldValue(toEnginePath(path) as never, getBy(baseline, toEnginePath(path)), {\n        dontUpdateMeta: true,\n      });\n      emitValueChange(path, 'api');\n      notify();\n    },\n    setErrors: (errors) => {\n      for (const [path, error] of Object.entries(errors)) setOrDelete(serverErrors, path, error);\n      notify();\n    },\n    setFormValidator: (validator) => {\n      formValidator = validator;\n    },\n    setValue: (path, value, source) => {\n      form.setFieldValue(toEnginePath(path) as never, value as never, { dontUpdateMeta: true });\n      if (source === 'api') baseline = setBy(baseline, toEnginePath(path), () => value);\n      emitValueChange(path, source);\n      if (source === 'user') afterUserChange(path);\n    },\n    submit: (onSubmit) => {\n      inflightSubmit ??= runSubmit(onSubmit).finally(() => {\n        inflightSubmit = undefined;\n      });\n      return inflightSubmit;\n    },\n    subscribe: (listener) => {\n      listeners.add(listener);\n      return () => listeners.delete(listener);\n    },\n    validate,\n  };\n\n  return engine;\n};\n"],"mappings":"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"}

package/es/Grid/style.mjs

@@ -4,7 +4,7 @@ const styles = { root: {
 	"--max-item-width": "lb18upadf",
 	"--rows": "lbb27uya",
 	k1xSpc: "lbrvj5dj",
-	kumcoG: "lb1h17qkj",
+	kumcoG: "lbrwvf1q",
 	$$css: true
 } };
 //#endregion

package/es/Grid/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Grid/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const styles = stylex.create({\n  root: {\n    '--gap': 'var(--grid-gap, 1em)',\n    '--max-item-width': 'var(--grid-max-item-width, 240px)',\n    '--rows': 'var(--grid-rows, 3)',\n    'display': 'grid',\n    'gridTemplateColumns':\n      'repeat(auto-fill, minmax(max(var(--max-item-width), calc((100% - var(--gap) * (var(--rows) - 1)) / var(--rows))), 1fr))',\n  },\n});\n"],"mappings":";AACA,MAAa,SAAS,EACpB,MAAM;CACJ,SAAS;CACT,oBAAoB;CACpB,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,EACF"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Grid/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const gridTemplateColumns =\n  'repeat(auto-fill, minmax(max(min(var(--max-item-width), 100%), calc((100% - var(--gap) * (var(--rows) - 1)) / var(--rows))), 1fr))';\n\nexport const styles = stylex.create({\n  root: {\n    '--gap': 'var(--grid-gap, 1em)',\n    '--max-item-width': 'var(--grid-max-item-width, 240px)',\n    '--rows': 'var(--grid-rows, 3)',\n    'display': 'grid',\n    // eslint-disable-next-line @stylexjs/valid-styles -- the rule cannot resolve a module constant; the compiler inlines it\n    'gridTemplateColumns': gridTemplateColumns,\n  },\n});\n"],"mappings":";AAEA,MAAa,SAAS,EACpB,MAAM;CACJ,SAAS;CACT,oBAAoB;CACpB,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,EACF"}

package/es/GroupAvatar/type.d.mts

@@ -14,4 +14,5 @@ export interface GroupAvatarProps extends Omit<BlockProps, 'width' | 'height' |
   size?: number;
 }
 //#endregion
+export {};
 //# sourceMappingURL=type.d.mts.map

package/es/Highlighter/FullFeatured.mjs

@@ -11,7 +11,7 @@ import { LangSelect } from "./LangSelect.mjs";
 import { bodyStyles, headerFlexProps, headerStyles, rootClassName, rootStyles } from "./style.mjs";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import { ChevronDown, ChevronRight } from "lucide-react";
 //#region src/Highlighter/FullFeatured.tsx
 const HeaderLanguage = memo(({ allowChangeLanguage, displayName, fileName, filetype, icon, language, setLanguage, showLanguage }) => {
@@ -127,7 +127,7 @@ const HighlighterFullFeatured = memo(({ content, language, setLanguage, showLang
 			})]
 		}), /* @__PURE__ */ jsx(FlexBasic_default, {
 			height: expand ? void 0 : 0,
-			...styleProps(bodyStyles(expand, variant), clsx(expand && "ant-highlighter-highlighter-body-expand", classNames?.body), customStyles?.body),
+			...styleProps(bodyStyles(expand, variant), clsx$1(expand && "ant-highlighter-highlighter-body-expand", classNames?.body), customStyles?.body),
 			children
 		})]
 	});

package/es/Highlighter/FullFeatured.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FullFeatured.mjs","names":["Flexbox"],"sources":["../../src/Highlighter/FullFeatured.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { getCodeLanguageDisplayName, getCodeLanguageFilename } from '@/Highlighter/const';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport { styleProps } from '@/styles/stylex/props';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport LangSelect from './LangSelect';\nimport {\n  bodyStyles,\n  expandCls,\n  headerFlexProps,\n  headerStyles,\n  rootClassName,\n  rootStyles,\n} from './style';\nimport { type HighlighterProps } from './type';\n\ninterface HeaderLanguageProps {\n  allowChangeLanguage: boolean;\n  displayName: string;\n  fileName?: string;\n  filetype: string;\n  icon?: ReactNode;\n  language: string;\n  setLanguage?: (language: string) => void;\n  showLanguage?: boolean;\n}\n\nconst HeaderLanguage = memo<HeaderLanguageProps>(\n  ({\n    allowChangeLanguage,\n    displayName,\n    fileName,\n    filetype,\n    icon,\n    language,\n    setLanguage,\n    showLanguage,\n  }) => {\n    if (!showLanguage) return null;\n\n    if (allowChangeLanguage && !fileName)\n      return <LangSelect value={language.toLowerCase()} onSelect={setLanguage} />;\n\n    return (\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        {icon || (\n          <MaterialFileTypeIcon\n            fallbackUnknownType={false}\n            filename={filetype}\n            size={18}\n            type={'file'}\n            variant={'raw'}\n          />\n        )}\n        <Text ellipsis fontSize={13}>\n          {displayName}\n        </Text>\n      </Flexbox>\n    );\n  },\n  (prev, next) =>\n    prev.allowChangeLanguage === next.allowChangeLanguage &&\n    prev.displayName === next.displayName &&\n    prev.fileName === next.fileName &&\n    prev.filetype === next.filetype &&\n    prev.icon === next.icon &&\n    prev.language === next.language &&\n    prev.setLanguage === next.setLanguage &&\n    prev.showLanguage === next.showLanguage,\n);\n\ninterface HighlighterFullFeaturedProps extends Omit<\n  HighlighterProps,\n  'children' | 'bodyRender' | 'enableTransformer'\n> {\n  content: string;\n  setLanguage?: (language: string) => void;\n}\n\nexport const HighlighterFullFeatured = memo<HighlighterFullFeaturedProps & { children: ReactNode }>(\n  ({\n    content,\n    language,\n    setLanguage,\n    showLanguage,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    allowChangeLanguage = false,\n    fileName,\n    icon,\n    actionsRender,\n    copyable,\n    variant,\n    shadow,\n    wrap,\n    defaultExpand = true,\n    children,\n    ...rest\n  }) => {\n    const [expand, setExpand] = useState(defaultExpand);\n    const contentRef = useRef(content);\n\n    useEffect(() => {\n      contentRef.current = content;\n    }, [content]);\n\n    const getContent = useCallback(() => contentRef.current, []);\n\n    const originalActions = useMemo(() => {\n      if (!copyable) return null;\n      return <CopyButton content={getContent} size={'small'} />;\n    }, [copyable, getContent]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return originalActions;\n      return actionsRender({\n        actionIconSize: 'small',\n        content,\n        getContent,\n        language,\n        originalNode: originalActions,\n      });\n    }, [actionsRender, content, getContent, language, originalActions]);\n\n    const displayName = useMemo(() => {\n      if (fileName) return fileName;\n      return getCodeLanguageDisplayName(language);\n    }, [fileName, language]);\n\n    const filetype = useMemo(() => {\n      if (fileName) return fileName;\n      return getCodeLanguageFilename(language);\n    }, [fileName, language]);\n\n    const handleToggleExpand = useCallback(() => {\n      setExpand((prev) => !prev);\n    }, []);\n\n    return (\n      <Flexbox\n        data-code-type=\"highlighter\"\n        width={'100%'}\n        {...rest}\n        {...styleProps(rootStyles({ shadow, variant }), rootClassName(wrap, className), style)}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          justify={'space-between'}\n          onClick={handleToggleExpand}\n          {...headerFlexProps(variant)}\n          {...styleProps(headerStyles(variant), classNames?.header, customStyles?.header)}\n        >\n          <HeaderLanguage\n            allowChangeLanguage={allowChangeLanguage}\n            displayName={displayName}\n            fileName={fileName}\n            filetype={filetype}\n            icon={icon}\n            language={language}\n            setLanguage={setLanguage}\n            showLanguage={showLanguage}\n          />\n          <Flexbox horizontal align={'center'} flex={'none'} gap={4} onClick={stopPropagation}>\n            <Flexbox horizontal align={'center'} className={'panel-actions'} flex={'none'} gap={4}>\n              {actions}\n            </Flexbox>\n            <ActionIcon\n              icon={expand ? ChevronDown : ChevronRight}\n              size={'small'}\n              onClick={handleToggleExpand}\n            />\n          </Flexbox>\n        </Flexbox>\n        <Flexbox\n          height={expand ? undefined : 0}\n          {...styleProps(\n            bodyStyles(expand, variant),\n            clsx(expand && expandCls, classNames?.body),\n            customStyles?.body,\n          )}\n        >\n          {children}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nexport default HighlighterFullFeatured;\n"],"mappings":"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"}
+{"version":3,"file":"FullFeatured.mjs","names":["Flexbox","clsx"],"sources":["../../src/Highlighter/FullFeatured.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { getCodeLanguageDisplayName, getCodeLanguageFilename } from '@/Highlighter/const';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport { styleProps } from '@/styles/stylex/props';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport LangSelect from './LangSelect';\nimport {\n  bodyStyles,\n  expandCls,\n  headerFlexProps,\n  headerStyles,\n  rootClassName,\n  rootStyles,\n} from './style';\nimport { type HighlighterProps } from './type';\n\ninterface HeaderLanguageProps {\n  allowChangeLanguage: boolean;\n  displayName: string;\n  fileName?: string;\n  filetype: string;\n  icon?: ReactNode;\n  language: string;\n  setLanguage?: (language: string) => void;\n  showLanguage?: boolean;\n}\n\nconst HeaderLanguage = memo<HeaderLanguageProps>(\n  ({\n    allowChangeLanguage,\n    displayName,\n    fileName,\n    filetype,\n    icon,\n    language,\n    setLanguage,\n    showLanguage,\n  }) => {\n    if (!showLanguage) return null;\n\n    if (allowChangeLanguage && !fileName)\n      return <LangSelect value={language.toLowerCase()} onSelect={setLanguage} />;\n\n    return (\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        {icon || (\n          <MaterialFileTypeIcon\n            fallbackUnknownType={false}\n            filename={filetype}\n            size={18}\n            type={'file'}\n            variant={'raw'}\n          />\n        )}\n        <Text ellipsis fontSize={13}>\n          {displayName}\n        </Text>\n      </Flexbox>\n    );\n  },\n  (prev, next) =>\n    prev.allowChangeLanguage === next.allowChangeLanguage &&\n    prev.displayName === next.displayName &&\n    prev.fileName === next.fileName &&\n    prev.filetype === next.filetype &&\n    prev.icon === next.icon &&\n    prev.language === next.language &&\n    prev.setLanguage === next.setLanguage &&\n    prev.showLanguage === next.showLanguage,\n);\n\ninterface HighlighterFullFeaturedProps extends Omit<\n  HighlighterProps,\n  'children' | 'bodyRender' | 'enableTransformer'\n> {\n  content: string;\n  setLanguage?: (language: string) => void;\n}\n\nexport const HighlighterFullFeatured = memo<HighlighterFullFeaturedProps & { children: ReactNode }>(\n  ({\n    content,\n    language,\n    setLanguage,\n    showLanguage,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    allowChangeLanguage = false,\n    fileName,\n    icon,\n    actionsRender,\n    copyable,\n    variant,\n    shadow,\n    wrap,\n    defaultExpand = true,\n    children,\n    ...rest\n  }) => {\n    const [expand, setExpand] = useState(defaultExpand);\n    const contentRef = useRef(content);\n\n    useEffect(() => {\n      contentRef.current = content;\n    }, [content]);\n\n    const getContent = useCallback(() => contentRef.current, []);\n\n    const originalActions = useMemo(() => {\n      if (!copyable) return null;\n      return <CopyButton content={getContent} size={'small'} />;\n    }, [copyable, getContent]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return originalActions;\n      return actionsRender({\n        actionIconSize: 'small',\n        content,\n        getContent,\n        language,\n        originalNode: originalActions,\n      });\n    }, [actionsRender, content, getContent, language, originalActions]);\n\n    const displayName = useMemo(() => {\n      if (fileName) return fileName;\n      return getCodeLanguageDisplayName(language);\n    }, [fileName, language]);\n\n    const filetype = useMemo(() => {\n      if (fileName) return fileName;\n      return getCodeLanguageFilename(language);\n    }, [fileName, language]);\n\n    const handleToggleExpand = useCallback(() => {\n      setExpand((prev) => !prev);\n    }, []);\n\n    return (\n      <Flexbox\n        data-code-type=\"highlighter\"\n        width={'100%'}\n        {...rest}\n        {...styleProps(rootStyles({ shadow, variant }), rootClassName(wrap, className), style)}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          justify={'space-between'}\n          onClick={handleToggleExpand}\n          {...headerFlexProps(variant)}\n          {...styleProps(headerStyles(variant), classNames?.header, customStyles?.header)}\n        >\n          <HeaderLanguage\n            allowChangeLanguage={allowChangeLanguage}\n            displayName={displayName}\n            fileName={fileName}\n            filetype={filetype}\n            icon={icon}\n            language={language}\n            setLanguage={setLanguage}\n            showLanguage={showLanguage}\n          />\n          <Flexbox horizontal align={'center'} flex={'none'} gap={4} onClick={stopPropagation}>\n            <Flexbox horizontal align={'center'} className={'panel-actions'} flex={'none'} gap={4}>\n              {actions}\n            </Flexbox>\n            <ActionIcon\n              icon={expand ? ChevronDown : ChevronRight}\n              size={'small'}\n              onClick={handleToggleExpand}\n            />\n          </Flexbox>\n        </Flexbox>\n        <Flexbox\n          height={expand ? undefined : 0}\n          {...styleProps(\n            bodyStyles(expand, variant),\n            clsx(expand && expandCls, classNames?.body),\n            customStyles?.body,\n          )}\n        >\n          {children}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nexport default HighlighterFullFeatured;\n"],"mappings":"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"}

package/es/Highlighter/SyntaxHighlighter/StreamRenderer.mjs

@@ -3,7 +3,7 @@ import { useStreamHighlight } from "../../hooks/useStreamHighlight.mjs";
 import { createTokenFadeStore, markTokenBirths, resolveTokenFadeStyle } from "./tokenFade.mjs";
 import { memo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import { getTokenStyleObject } from "@shikijs/core";
 //#region src/Highlighter/SyntaxHighlighter/StreamRenderer.tsx
 const normalizeStyleKeys = (style) => {
@@ -80,7 +80,7 @@ const StreamRenderer = memo(({ children, className, enableTransformer, fallbackC
 		dir: "ltr",
 		style,
 		children: /* @__PURE__ */ jsx("pre", {
-			className: clsx("shiki", theme),
+			className: clsx$1("shiki", theme),
 			style: preStyle,
 			tabIndex: 0,
 			children: /* @__PURE__ */ jsx("code", {

package/es/Highlighter/SyntaxHighlighter/StreamRenderer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StreamRenderer.mjs","names":[],"sources":["../../../src/Highlighter/SyntaxHighlighter/StreamRenderer.tsx"],"sourcesContent":["'use client';\n\nimport { getTokenStyleObject } from '@shikijs/core';\nimport clsx from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { memo, useRef } from 'react';\nimport type { BuiltinTheme, ThemedToken } from 'shiki';\n\nimport { useStreamHighlight } from '@/hooks/useStreamHighlight';\n\nimport {\n  createTokenFadeStore,\n  markTokenBirths,\n  resolveTokenFadeStyle,\n  type TokenFadeStore,\n} from './tokenFade';\n\ninterface StreamRendererProps {\n  children: string;\n  className?: string;\n  enableTransformer?: boolean;\n  fallbackClassName?: string;\n  language: string;\n  style?: CSSProperties;\n  theme?: BuiltinTheme;\n}\n\nconst normalizeStyleKeys = (style: Record<string, string | number>): CSSProperties => {\n  const normalized: CSSProperties = {};\n  Object.entries(style).forEach(([key, value]) => {\n    const normalizedKey = key.replaceAll(/-([a-z])/g, (_, char) => char.toUpperCase());\n    (normalized as Record<string, string | number>)[normalizedKey] = value;\n  });\n  return normalized;\n};\n\nconst getTokenInlineStyle = (token: ThemedToken): CSSProperties => {\n  const rawStyle = token.htmlStyle || getTokenStyleObject(token);\n  const baseStyle = normalizeStyleKeys(rawStyle);\n  return { ...baseStyle, whiteSpace: 'pre' };\n};\n\nconst TokenSpan = memo(\n  ({ fadeStyle, token }: { fadeStyle?: CSSProperties | null; token: ThemedToken }) => {\n    const style = fadeStyle\n      ? { ...getTokenInlineStyle(token), ...fadeStyle }\n      : getTokenInlineStyle(token);\n    return (\n      <span className={fadeStyle ? 'stream-char' : undefined} style={style}>\n        {token.content}\n      </span>\n    );\n  },\n  (prev, next) => prev.token === next.token && prev.fadeStyle === next.fadeStyle,\n);\n\nconst TokenLine = memo(\n  ({\n    fade,\n    line,\n    now,\n    start,\n  }: {\n    fade: TokenFadeStore;\n    line: ThemedToken[];\n    now: number;\n    start: number;\n  }) => {\n    if (!line.length) {\n      return (\n        <span className=\"line\">\n          <span style={{ whiteSpace: 'pre' }}>{'\\u00A0'}</span>\n        </span>\n      );\n    }\n\n    let offset = start;\n    return (\n      <span className=\"line\">\n        {line.map((token) => {\n          const tokenOffset = offset;\n          offset += token.content.length;\n          return (\n            <TokenSpan\n              fadeStyle={resolveTokenFadeStyle(fade, tokenOffset, now)}\n              key={tokenOffset}\n              token={token}\n            />\n          );\n        })}\n      </span>\n    );\n  },\n  (prev, next) => prev.line === next.line && prev.start === next.start,\n);\n\nconst StreamRenderer = memo<StreamRendererProps>(\n  ({ children, className, enableTransformer, fallbackClassName, language, style, theme }) => {\n    // Safely handle empty or invalid children\n    const safeChildren = children ?? '';\n\n    const streaming = useStreamHighlight(safeChildren, {\n      enableTransformer,\n      language,\n      streaming: true,\n      theme,\n    });\n\n    const lines = streaming?.lines;\n    const preStyle = streaming?.preStyle;\n\n    const fadeRef = useRef<TokenFadeStore>(createTokenFadeStore());\n    const previousTextRef = useRef('');\n    if (!safeChildren.startsWith(previousTextRef.current)) {\n      fadeRef.current = createTokenFadeStore();\n    }\n    previousTextRef.current = safeChildren;\n    const now = performance.now();\n    const lineStarts = lines ? markTokenBirths(fadeRef.current, lines, now) : [];\n\n    if (!lines || lines.length === 0) {\n      return (\n        <div className={fallbackClassName} dir=\"ltr\" style={style}>\n          <pre>\n            <code>{safeChildren}</code>\n          </pre>\n        </div>\n      );\n    }\n\n    return (\n      <div className={className} dir=\"ltr\" style={style}>\n        <pre className={clsx('shiki', theme)} style={preStyle} tabIndex={0}>\n          <code style={{ display: 'flex', flexDirection: 'column', whiteSpace: 'pre' }}>\n            {lines.map((line, index) => (\n              <TokenLine\n                fade={fadeRef.current}\n                key={`line-${index}`}\n                line={line}\n                now={now}\n                start={lineStarts[index]}\n              />\n            ))}\n          </code>\n        </pre>\n      </div>\n    );\n  },\n);\n\nStreamRenderer.displayName = 'StreamRenderer';\n\nexport default StreamRenderer;\n"],"mappings":";;;;;;;;AA2BA,MAAM,sBAAsB,UAA0D;CACpF,MAAM,aAA4B,CAAC;CACnC,OAAO,QAAQ,KAAK,CAAC,CAAC,SAAS,CAAC,KAAK,WAAW;EAC9C,MAAM,gBAAgB,IAAI,WAAW,cAAc,GAAG,SAAS,KAAK,YAAY,CAAC;EACjF,WAAgD,iBAAiB;CACnE,CAAC;CACD,OAAO;AACT;AAEA,MAAM,uBAAuB,UAAsC;CACjE,MAAM,WAAW,MAAM,aAAa,oBAAoB,KAAK;CAE7D,OAAO;EAAE,GADS,mBAAmB,QACjB;EAAG,YAAY;CAAM;AAC3C;AAEA,MAAM,YAAY,MACf,EAAE,WAAW,YAAsE;CAClF,MAAM,QAAQ,YACV;EAAE,GAAG,oBAAoB,KAAK;EAAG,GAAG;CAAU,IAC9C,oBAAoB,KAAK;CAC7B,OACE,oBAAC,QAAD;EAAM,WAAW,YAAY,gBAAgB,KAAA;EAAkB;EAC5D,UAAA,MAAM;CACH,CAAA;AAEV,IACC,MAAM,SAAS,KAAK,UAAU,KAAK,SAAS,KAAK,cAAc,KAAK,SACvE;AAEA,MAAM,YAAY,MACf,EACC,MACA,MACA,KACA,YAMI;CACJ,IAAI,CAAC,KAAK,QACR,OACE,oBAAC,QAAD;EAAM,WAAU;EACd,UAAA,oBAAC,QAAD;GAAM,OAAO,EAAE,YAAY,MAAM;GAAI,UAAA;EAAe,CAAA;CAChD,CAAA;CAIV,IAAI,SAAS;CACb,OACE,oBAAC,QAAD;EAAM,WAAU;EACb,UAAA,KAAK,KAAK,UAAU;GACnB,MAAM,cAAc;GACpB,UAAU,MAAM,QAAQ;GACxB,OACE,oBAAC,WAAD;IACE,WAAW,sBAAsB,MAAM,aAAa,GAAG;IAEhD;GACR,GAFM,WAEN;EAEL,CAAC;CACG,CAAA;AAEV,IACC,MAAM,SAAS,KAAK,SAAS,KAAK,QAAQ,KAAK,UAAU,KAAK,KACjE;AAEA,MAAM,iBAAiB,MACpB,EAAE,UAAU,WAAW,mBAAmB,mBAAmB,UAAU,OAAO,YAAY;CAEzF,MAAM,eAAe,YAAY;CAEjC,MAAM,YAAY,mBAAmB,cAAc;EACjD;EACA;EACA,WAAW;EACX;CACF,CAAC;CAED,MAAM,QAAQ,WAAW;CACzB,MAAM,WAAW,WAAW;CAE5B,MAAM,UAAU,OAAuB,qBAAqB,CAAC;CAC7D,MAAM,kBAAkB,OAAO,EAAE;CACjC,IAAI,CAAC,aAAa,WAAW,gBAAgB,OAAO,GAClD,QAAQ,UAAU,qBAAqB;CAEzC,gBAAgB,UAAU;CAC1B,MAAM,MAAM,YAAY,IAAI;CAC5B,MAAM,aAAa,QAAQ,gBAAgB,QAAQ,SAAS,OAAO,GAAG,IAAI,CAAC;CAE3E,IAAI,CAAC,SAAS,MAAM,WAAW,GAC7B,OACE,oBAAC,OAAD;EAAK,WAAW;EAAmB,KAAI;EAAa;EAClD,UAAA,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD,EAAA,UAAO,aAAmB,CAAA,EACvB,CAAA;CACF,CAAA;CAIT,OACE,oBAAC,OAAD;EAAgB;EAAW,KAAI;EAAa;EAC1C,UAAA,oBAAC,OAAD;GAAK,WAAW,KAAK,SAAS,KAAK;GAAG,OAAO;GAAU,UAAU;GAC/D,UAAA,oBAAC,QAAD;IAAM,OAAO;KAAE,SAAS;KAAQ,eAAe;KAAU,YAAY;IAAM;IACxE,UAAA,MAAM,KAAK,MAAM,UAChB,oBAAC,WAAD;KACE,MAAM,QAAQ;KAER;KACD;KACL,OAAO,WAAW;IACnB,GAJM,QAAQ,OAId,CACF;GACG,CAAA;EACH,CAAA;CACF,CAAA;AAET,CACF;AAEA,eAAe,cAAc"}
+{"version":3,"file":"StreamRenderer.mjs","names":["clsx"],"sources":["../../../src/Highlighter/SyntaxHighlighter/StreamRenderer.tsx"],"sourcesContent":["'use client';\n\nimport { getTokenStyleObject } from '@shikijs/core';\nimport clsx from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { memo, useRef } from 'react';\nimport type { BuiltinTheme, ThemedToken } from 'shiki';\n\nimport { useStreamHighlight } from '@/hooks/useStreamHighlight';\n\nimport {\n  createTokenFadeStore,\n  markTokenBirths,\n  resolveTokenFadeStyle,\n  type TokenFadeStore,\n} from './tokenFade';\n\ninterface StreamRendererProps {\n  children: string;\n  className?: string;\n  enableTransformer?: boolean;\n  fallbackClassName?: string;\n  language: string;\n  style?: CSSProperties;\n  theme?: BuiltinTheme;\n}\n\nconst normalizeStyleKeys = (style: Record<string, string | number>): CSSProperties => {\n  const normalized: CSSProperties = {};\n  Object.entries(style).forEach(([key, value]) => {\n    const normalizedKey = key.replaceAll(/-([a-z])/g, (_, char) => char.toUpperCase());\n    (normalized as Record<string, string | number>)[normalizedKey] = value;\n  });\n  return normalized;\n};\n\nconst getTokenInlineStyle = (token: ThemedToken): CSSProperties => {\n  const rawStyle = token.htmlStyle || getTokenStyleObject(token);\n  const baseStyle = normalizeStyleKeys(rawStyle);\n  return { ...baseStyle, whiteSpace: 'pre' };\n};\n\nconst TokenSpan = memo(\n  ({ fadeStyle, token }: { fadeStyle?: CSSProperties | null; token: ThemedToken }) => {\n    const style = fadeStyle\n      ? { ...getTokenInlineStyle(token), ...fadeStyle }\n      : getTokenInlineStyle(token);\n    return (\n      <span className={fadeStyle ? 'stream-char' : undefined} style={style}>\n        {token.content}\n      </span>\n    );\n  },\n  (prev, next) => prev.token === next.token && prev.fadeStyle === next.fadeStyle,\n);\n\nconst TokenLine = memo(\n  ({\n    fade,\n    line,\n    now,\n    start,\n  }: {\n    fade: TokenFadeStore;\n    line: ThemedToken[];\n    now: number;\n    start: number;\n  }) => {\n    if (!line.length) {\n      return (\n        <span className=\"line\">\n          <span style={{ whiteSpace: 'pre' }}>{'\\u00A0'}</span>\n        </span>\n      );\n    }\n\n    let offset = start;\n    return (\n      <span className=\"line\">\n        {line.map((token) => {\n          const tokenOffset = offset;\n          offset += token.content.length;\n          return (\n            <TokenSpan\n              fadeStyle={resolveTokenFadeStyle(fade, tokenOffset, now)}\n              key={tokenOffset}\n              token={token}\n            />\n          );\n        })}\n      </span>\n    );\n  },\n  (prev, next) => prev.line === next.line && prev.start === next.start,\n);\n\nconst StreamRenderer = memo<StreamRendererProps>(\n  ({ children, className, enableTransformer, fallbackClassName, language, style, theme }) => {\n    // Safely handle empty or invalid children\n    const safeChildren = children ?? '';\n\n    const streaming = useStreamHighlight(safeChildren, {\n      enableTransformer,\n      language,\n      streaming: true,\n      theme,\n    });\n\n    const lines = streaming?.lines;\n    const preStyle = streaming?.preStyle;\n\n    const fadeRef = useRef<TokenFadeStore>(createTokenFadeStore());\n    const previousTextRef = useRef('');\n    if (!safeChildren.startsWith(previousTextRef.current)) {\n      fadeRef.current = createTokenFadeStore();\n    }\n    previousTextRef.current = safeChildren;\n    const now = performance.now();\n    const lineStarts = lines ? markTokenBirths(fadeRef.current, lines, now) : [];\n\n    if (!lines || lines.length === 0) {\n      return (\n        <div className={fallbackClassName} dir=\"ltr\" style={style}>\n          <pre>\n            <code>{safeChildren}</code>\n          </pre>\n        </div>\n      );\n    }\n\n    return (\n      <div className={className} dir=\"ltr\" style={style}>\n        <pre className={clsx('shiki', theme)} style={preStyle} tabIndex={0}>\n          <code style={{ display: 'flex', flexDirection: 'column', whiteSpace: 'pre' }}>\n            {lines.map((line, index) => (\n              <TokenLine\n                fade={fadeRef.current}\n                key={`line-${index}`}\n                line={line}\n                now={now}\n                start={lineStarts[index]}\n              />\n            ))}\n          </code>\n        </pre>\n      </div>\n    );\n  },\n);\n\nStreamRenderer.displayName = 'StreamRenderer';\n\nexport default StreamRenderer;\n"],"mappings":";;;;;;;;AA2BA,MAAM,sBAAsB,UAA0D;CACpF,MAAM,aAA4B,CAAC;CACnC,OAAO,QAAQ,KAAK,CAAC,CAAC,SAAS,CAAC,KAAK,WAAW;EAC9C,MAAM,gBAAgB,IAAI,WAAW,cAAc,GAAG,SAAS,KAAK,YAAY,CAAC;EACjF,WAAgD,iBAAiB;CACnE,CAAC;CACD,OAAO;AACT;AAEA,MAAM,uBAAuB,UAAsC;CACjE,MAAM,WAAW,MAAM,aAAa,oBAAoB,KAAK;CAE7D,OAAO;EAAE,GADS,mBAAmB,QACjB;EAAG,YAAY;CAAM;AAC3C;AAEA,MAAM,YAAY,MACf,EAAE,WAAW,YAAsE;CAClF,MAAM,QAAQ,YACV;EAAE,GAAG,oBAAoB,KAAK;EAAG,GAAG;CAAU,IAC9C,oBAAoB,KAAK;CAC7B,OACE,oBAAC,QAAD;EAAM,WAAW,YAAY,gBAAgB,KAAA;EAAkB;EAC5D,UAAA,MAAM;CACH,CAAA;AAEV,IACC,MAAM,SAAS,KAAK,UAAU,KAAK,SAAS,KAAK,cAAc,KAAK,SACvE;AAEA,MAAM,YAAY,MACf,EACC,MACA,MACA,KACA,YAMI;CACJ,IAAI,CAAC,KAAK,QACR,OACE,oBAAC,QAAD;EAAM,WAAU;EACd,UAAA,oBAAC,QAAD;GAAM,OAAO,EAAE,YAAY,MAAM;GAAI,UAAA;EAAe,CAAA;CAChD,CAAA;CAIV,IAAI,SAAS;CACb,OACE,oBAAC,QAAD;EAAM,WAAU;EACb,UAAA,KAAK,KAAK,UAAU;GACnB,MAAM,cAAc;GACpB,UAAU,MAAM,QAAQ;GACxB,OACE,oBAAC,WAAD;IACE,WAAW,sBAAsB,MAAM,aAAa,GAAG;IAEhD;GACR,GAFM,WAEN;EAEL,CAAC;CACG,CAAA;AAEV,IACC,MAAM,SAAS,KAAK,SAAS,KAAK,QAAQ,KAAK,UAAU,KAAK,KACjE;AAEA,MAAM,iBAAiB,MACpB,EAAE,UAAU,WAAW,mBAAmB,mBAAmB,UAAU,OAAO,YAAY;CAEzF,MAAM,eAAe,YAAY;CAEjC,MAAM,YAAY,mBAAmB,cAAc;EACjD;EACA;EACA,WAAW;EACX;CACF,CAAC;CAED,MAAM,QAAQ,WAAW;CACzB,MAAM,WAAW,WAAW;CAE5B,MAAM,UAAU,OAAuB,qBAAqB,CAAC;CAC7D,MAAM,kBAAkB,OAAO,EAAE;CACjC,IAAI,CAAC,aAAa,WAAW,gBAAgB,OAAO,GAClD,QAAQ,UAAU,qBAAqB;CAEzC,gBAAgB,UAAU;CAC1B,MAAM,MAAM,YAAY,IAAI;CAC5B,MAAM,aAAa,QAAQ,gBAAgB,QAAQ,SAAS,OAAO,GAAG,IAAI,CAAC;CAE3E,IAAI,CAAC,SAAS,MAAM,WAAW,GAC7B,OACE,oBAAC,OAAD;EAAK,WAAW;EAAmB,KAAI;EAAa;EAClD,UAAA,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD,EAAA,UAAO,aAAmB,CAAA,EACvB,CAAA;CACF,CAAA;CAIT,OACE,oBAAC,OAAD;EAAgB;EAAW,KAAI;EAAa;EAC1C,UAAA,oBAAC,OAAD;GAAK,WAAWA,OAAK,SAAS,KAAK;GAAG,OAAO;GAAU,UAAU;GAC/D,UAAA,oBAAC,QAAD;IAAM,OAAO;KAAE,SAAS;KAAQ,eAAe;KAAU,YAAY;IAAM;IACxE,UAAA,MAAM,KAAK,MAAM,UAChB,oBAAC,WAAD;KACE,MAAM,QAAQ;KAER;KACD;KACL,OAAO,WAAW;IACnB,GAJM,QAAQ,OAId,CACF;GACG,CAAA;EACH,CAAA;CACF,CAAA;AAET,CACF;AAEA,eAAe,cAAc"}

package/es/Highlighter/SyntaxHighlighter/index.mjs

@@ -5,24 +5,24 @@ import StreamRenderer from "./StreamRenderer.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import { STREAM_FADE_DURATION } from "@lobehub/streamdown";
 //#region src/Highlighter/SyntaxHighlighter/index.tsx
 const SyntaxHighlighterImpl = memo(({ animated, children, className, enableTransformer, language, style, theme, variant = "borderless", xstyle }) => {
 	const isDefaultTheme = theme === "lobe-theme" || !theme;
 	const showBackground = !isDefaultTheme && variant === "filled";
 	const resolvedTheme = isDefaultTheme ? void 0 : theme;
-	const classes = clsx("lobe-syntax-highlighter", !showBackground && "lobe-syntax-highlighter-transparent", animated && "lobe-syntax-highlighter-animated", variant === "borderless" ? "lobe-syntax-highlighter-unpadded" : "lobe-syntax-highlighter-padded");
+	const classes = clsx$1("lobe-syntax-highlighter", !showBackground && "lobe-syntax-highlighter-transparent", animated && "lobe-syntax-highlighter-animated", variant === "borderless" ? "lobe-syntax-highlighter-unpadded" : "lobe-syntax-highlighter-padded");
 	const mergedStyle = animated ? {
 		"--lobe-syntax-highlighter-stream-fade": `${STREAM_FADE_DURATION}ms`,
 		...style
 	} : style;
-	const shiki = styleProps([styles.root, xstyle], clsx(classes, "ant-highlighter-highlighter-shiki lobe-syntax-highlighter-shiki", className), mergedStyle);
+	const shiki = styleProps([styles.root, xstyle], clsx$1(classes, "ant-highlighter-highlighter-shiki lobe-syntax-highlighter-shiki", className), mergedStyle);
 	const fallback = styleProps([
 		styles.root,
 		styles.unshiki,
 		xstyle
-	], clsx(classes, className), mergedStyle);
+	], clsx$1(classes, className), mergedStyle);
 	return /* @__PURE__ */ jsx(animated ? StreamRenderer : StaticRenderer, {
 		className: shiki.className,
 		enableTransformer,

package/es/Highlighter/SyntaxHighlighter/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/Highlighter/SyntaxHighlighter/index.tsx"],"sourcesContent":["'use client';\n\nimport { STREAM_FADE_DURATION } from '@lobehub/streamdown';\nimport clsx from 'clsx';\nimport { type CSSProperties, memo } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport type { SyntaxHighlighterProps } from '../type';\nimport StaticRenderer from './StaticRenderer';\nimport StreamRenderer from './StreamRenderer';\nimport { styles } from './style';\n\ntype SyntaxHighlighterImplProps = SyntaxHighlighterProps & {\n  xstyle?: Parameters<typeof styleProps>[0];\n};\n\nexport const SyntaxHighlighterImpl = memo<SyntaxHighlighterImplProps>(\n  ({\n    animated,\n    children,\n    className,\n    enableTransformer,\n    language,\n    style,\n    theme,\n    variant = 'borderless',\n    xstyle,\n  }) => {\n    const isDefaultTheme = theme === 'lobe-theme' || !theme;\n    const showBackground = !isDefaultTheme && variant === 'filled';\n    const resolvedTheme = isDefaultTheme ? undefined : theme;\n\n    const classes = clsx(\n      'lobe-syntax-highlighter',\n      !showBackground && 'lobe-syntax-highlighter-transparent',\n      animated && 'lobe-syntax-highlighter-animated',\n      variant === 'borderless'\n        ? 'lobe-syntax-highlighter-unpadded'\n        : 'lobe-syntax-highlighter-padded',\n    );\n    const mergedStyle = animated\n      ? ({\n          '--lobe-syntax-highlighter-stream-fade': `${STREAM_FADE_DURATION}ms`,\n          ...style,\n        } as CSSProperties)\n      : style;\n\n    const shiki = styleProps(\n      [styles.root, xstyle],\n      clsx(classes, 'ant-highlighter-highlighter-shiki lobe-syntax-highlighter-shiki', className),\n      mergedStyle,\n    );\n    const fallback = styleProps(\n      [styles.root, styles.unshiki, xstyle],\n      clsx(classes, className),\n      mergedStyle,\n    );\n\n    const Renderer = animated ? StreamRenderer : StaticRenderer;\n\n    return (\n      <Renderer\n        className={shiki.className}\n        enableTransformer={enableTransformer}\n        fallbackClassName={fallback.className}\n        language={language}\n        style={shiki.style}\n        theme={resolvedTheme}\n      >\n        {children}\n      </Renderer>\n    );\n  },\n  (prevProps, nextProps) =>\n    prevProps.children === nextProps.children && prevProps.language === nextProps.language,\n);\n\nconst SyntaxHighlighter = memo<SyntaxHighlighterProps>((props) => (\n  <SyntaxHighlighterImpl {...props} />\n));\n\nSyntaxHighlighter.displayName = 'SyntaxHighlighter';\n\nexport default SyntaxHighlighter;\n"],"mappings":";;;;;;;;;;AAiBA,MAAa,wBAAwB,MAClC,EACC,UACA,UACA,WACA,mBACA,UACA,OACA,OACA,UAAU,cACV,aACI;CACJ,MAAM,iBAAiB,UAAU,gBAAgB,CAAC;CAClD,MAAM,iBAAiB,CAAC,kBAAkB,YAAY;CACtD,MAAM,gBAAgB,iBAAiB,KAAA,IAAY;CAEnD,MAAM,UAAU,KACd,2BACA,CAAC,kBAAkB,uCACnB,YAAY,oCACZ,YAAY,eACR,qCACA,gCACN;CACA,MAAM,cAAc,WACf;EACC,yCAAyC,GAAG,qBAAqB;EACjE,GAAG;CACL,IACA;CAEJ,MAAM,QAAQ,WACZ,CAAC,OAAO,MAAM,MAAM,GACpB,KAAK,SAAS,mEAAmE,SAAS,GAC1F,WACF;CACA,MAAM,WAAW,WACf;EAAC,OAAO;EAAM,OAAO;EAAS;CAAM,GACpC,KAAK,SAAS,SAAS,GACvB,WACF;CAIA,OACE,oBAHe,WAAW,iBAAiB,gBAG3C;EACE,WAAW,MAAM;EACE;EACnB,mBAAmB,SAAS;EAClB;EACV,OAAO,MAAM;EACb,OAAO;EAEN;CACO,CAAA;AAEd,IACC,WAAW,cACV,UAAU,aAAa,UAAU,YAAY,UAAU,aAAa,UAAU,QAClF;AAEA,MAAM,oBAAoB,MAA8B,UACtD,oBAAC,uBAAD,EAAuB,GAAI,MAAQ,CAAA,CACpC;AAED,kBAAkB,cAAc"}
+{"version":3,"file":"index.mjs","names":["clsx"],"sources":["../../../src/Highlighter/SyntaxHighlighter/index.tsx"],"sourcesContent":["'use client';\n\nimport { STREAM_FADE_DURATION } from '@lobehub/streamdown';\nimport clsx from 'clsx';\nimport { type CSSProperties, memo } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport type { SyntaxHighlighterProps } from '../type';\nimport StaticRenderer from './StaticRenderer';\nimport StreamRenderer from './StreamRenderer';\nimport { styles } from './style';\n\ntype SyntaxHighlighterImplProps = SyntaxHighlighterProps & {\n  xstyle?: Parameters<typeof styleProps>[0];\n};\n\nexport const SyntaxHighlighterImpl = memo<SyntaxHighlighterImplProps>(\n  ({\n    animated,\n    children,\n    className,\n    enableTransformer,\n    language,\n    style,\n    theme,\n    variant = 'borderless',\n    xstyle,\n  }) => {\n    const isDefaultTheme = theme === 'lobe-theme' || !theme;\n    const showBackground = !isDefaultTheme && variant === 'filled';\n    const resolvedTheme = isDefaultTheme ? undefined : theme;\n\n    const classes = clsx(\n      'lobe-syntax-highlighter',\n      !showBackground && 'lobe-syntax-highlighter-transparent',\n      animated && 'lobe-syntax-highlighter-animated',\n      variant === 'borderless'\n        ? 'lobe-syntax-highlighter-unpadded'\n        : 'lobe-syntax-highlighter-padded',\n    );\n    const mergedStyle = animated\n      ? ({\n          '--lobe-syntax-highlighter-stream-fade': `${STREAM_FADE_DURATION}ms`,\n          ...style,\n        } as CSSProperties)\n      : style;\n\n    const shiki = styleProps(\n      [styles.root, xstyle],\n      clsx(classes, 'ant-highlighter-highlighter-shiki lobe-syntax-highlighter-shiki', className),\n      mergedStyle,\n    );\n    const fallback = styleProps(\n      [styles.root, styles.unshiki, xstyle],\n      clsx(classes, className),\n      mergedStyle,\n    );\n\n    const Renderer = animated ? StreamRenderer : StaticRenderer;\n\n    return (\n      <Renderer\n        className={shiki.className}\n        enableTransformer={enableTransformer}\n        fallbackClassName={fallback.className}\n        language={language}\n        style={shiki.style}\n        theme={resolvedTheme}\n      >\n        {children}\n      </Renderer>\n    );\n  },\n  (prevProps, nextProps) =>\n    prevProps.children === nextProps.children && prevProps.language === nextProps.language,\n);\n\nconst SyntaxHighlighter = memo<SyntaxHighlighterProps>((props) => (\n  <SyntaxHighlighterImpl {...props} />\n));\n\nSyntaxHighlighter.displayName = 'SyntaxHighlighter';\n\nexport default SyntaxHighlighter;\n"],"mappings":";;;;;;;;;;AAiBA,MAAa,wBAAwB,MAClC,EACC,UACA,UACA,WACA,mBACA,UACA,OACA,OACA,UAAU,cACV,aACI;CACJ,MAAM,iBAAiB,UAAU,gBAAgB,CAAC;CAClD,MAAM,iBAAiB,CAAC,kBAAkB,YAAY;CACtD,MAAM,gBAAgB,iBAAiB,KAAA,IAAY;CAEnD,MAAM,UAAUA,OACd,2BACA,CAAC,kBAAkB,uCACnB,YAAY,oCACZ,YAAY,eACR,qCACA,gCACN;CACA,MAAM,cAAc,WACf;EACC,yCAAyC,GAAG,qBAAqB;EACjE,GAAG;CACL,IACA;CAEJ,MAAM,QAAQ,WACZ,CAAC,OAAO,MAAM,MAAM,GACpBA,OAAK,SAAS,mEAAmE,SAAS,GAC1F,WACF;CACA,MAAM,WAAW,WACf;EAAC,OAAO;EAAM,OAAO;EAAS;CAAM,GACpCA,OAAK,SAAS,SAAS,GACvB,WACF;CAIA,OACE,oBAHe,WAAW,iBAAiB,gBAG3C;EACE,WAAW,MAAM;EACE;EACnB,mBAAmB,SAAS;EAClB;EACV,OAAO,MAAM;EACb,OAAO;EAEN;CACO,CAAA;AAEd,IACC,WAAW,cACV,UAAU,aAAa,UAAU,YAAY,UAAU,aAAa,UAAU,QAClF;AAEA,MAAM,oBAAoB,MAA8B,UACtD,oBAAC,uBAAD,EAAuB,GAAI,MAAQ,CAAA,CACpC;AAED,kBAAkB,cAAc"}

package/es/Highlighter/const.d.mts

@@ -5,4 +5,5 @@ interface HighlighterThemeItem {
 }
 export declare const highlighterThemes: HighlighterThemeItem[];
 //#endregion
+export {};
 //# sourceMappingURL=const.d.mts.map

package/es/Highlighter/style.mjs

@@ -1,5 +1,5 @@
 import { stylish } from "../styles/stylex/stylish.mjs";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 //#region src/Highlighter/style.ts
 const actionsHoverCls = "ant-highlighter-highlighter-hover-actions lobe-highlighter-actions";
 const langHoverCls = "ant-highlighter-highlighter-hover-lang lobe-highlighter-lang";
@@ -65,7 +65,7 @@ const rootStyles = ({ shadow, variant = "filled" }) => [
 	variantStyles[variant],
 	shadow && styles.shadow
 ];
-const rootClassName = (wrap, className) => clsx(prefix, "lobe-highlighter", wrap ? "lobe-highlighter-wrap" : "lobe-highlighter-nowrap", className);
+const rootClassName = (wrap, className) => clsx$1(prefix, "lobe-highlighter", wrap ? "lobe-highlighter-wrap" : "lobe-highlighter-nowrap", className);
 const headerStyles = (variant = "filled") => [styles.header, variant === "filled" && styles.headerFilled];
 const headerFlexProps = (variant = "filled") => ({
 	padding: 4,

package/es/Highlighter/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Highlighter/style.ts"],"sourcesContent":["import './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { stylish } from '@/styles/stylex/stylish';\n\nimport type { HighlighterProps } from './type';\n\nexport const actionsHoverCls = 'ant-highlighter-highlighter-hover-actions lobe-highlighter-actions';\nexport const langHoverCls = 'ant-highlighter-highlighter-hover-lang lobe-highlighter-lang';\nexport const expandCls = 'ant-highlighter-highlighter-body-expand';\nexport const prefix = 'ant-highlighter';\n\nexport const styles = stylex.create({\n  actions: {\n    insetBlockStart: 8,\n    insetInlineEnd: 8,\n    opacity: 0,\n    position: 'absolute',\n    zIndex: 2,\n  },\n  body: {\n    overflow: 'hidden',\n    transition: `opacity 0.25s ${cssVar.motionEaseOut}`,\n  },\n  bodyCollapsed: {\n    opacity: 0,\n  },\n  bodyDivider: {\n    borderBlockStartColor: cssVar.colorFillQuaternary,\n    borderBlockStartStyle: 'solid',\n    borderBlockStartWidth: 1,\n  },\n  filled: {\n    backgroundColor: cssVar.colorFillQuaternary,\n  },\n  header: {\n    cursor: 'pointer',\n    position: 'relative',\n  },\n  headerFilled: {\n    backgroundColor: 'transparent',\n  },\n  root: {\n    borderRadius: cssVar.borderRadius,\n    overflow: 'hidden',\n    transition: `background-color 100ms ${cssVar.motionEaseOut}`,\n    position: 'relative',\n    width: '100%',\n  },\n  shadow: {\n    boxShadow: `0 1px 0 -1px ${cssVar.colorBorder}, 0 1px 2px -0.5px ${cssVar.colorBorder}, 0 2px 2px -1px ${cssVar.colorBorderSecondary}, 0 3px 6px -4px ${cssVar.colorBorderSecondary}`,\n  },\n});\n\ntype Variant = NonNullable<HighlighterProps['variant']>;\n\nconst variantStyles = {\n  borderless: stylish.variantBorderlessWithoutHover,\n  filled: [stylish.variantFilledWithoutHover, styles.filled],\n  outlined: stylish.variantOutlinedWithoutHover,\n};\n\nexport const rootStyles = ({\n  shadow,\n  variant = 'filled',\n}: {\n  shadow?: boolean;\n  variant?: Variant;\n}) => [styles.root, variantStyles[variant], shadow && styles.shadow];\n\nexport const rootClassName = (wrap?: boolean, className?: string) =>\n  clsx(\n    prefix,\n    'lobe-highlighter',\n    wrap ? 'lobe-highlighter-wrap' : 'lobe-highlighter-nowrap',\n    className,\n  );\n\nexport const headerStyles = (variant: Variant = 'filled') => [\n  styles.header,\n  variant === 'filled' && styles.headerFilled,\n];\n\nexport const headerFlexProps = (variant: Variant = 'filled') => ({\n  padding: 4,\n  paddingInline: variant === 'borderless' ? 0 : undefined,\n});\n\nexport const bodyStyles = (expand: boolean, variant: Variant = 'filled') => [\n  styles.body,\n  expand ? variant !== 'borderless' && styles.bodyDivider : styles.bodyCollapsed,\n];\n"],"mappings":";;;AAOA,MAAa,kBAAkB;AAC/B,MAAa,eAAe;AAC5B,MAAa,YAAY;AACzB,MAAa,SAAS;AACtB,MAAa,SAAS;CACpB,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;AACF;AAEA,MAAM,gBAAgB;CACpB,YAAY,QAAQ;CACpB,QAAQ,CAAC,QAAQ,2BAA2B,OAAO,MAAM;CACzD,UAAU,QAAQ;AACpB;AACA,MAAa,cAAc,EACzB,QACA,UAAU,eAIN;CAAC,OAAO;CAAM,cAAc;CAAU,UAAU,OAAO;AAAM;AACnE,MAAa,iBAAiB,MAAgB,cAAuB,KAAK,QAAQ,oBAAoB,OAAO,0BAA0B,2BAA2B,SAAS;AAC3K,MAAa,gBAAgB,UAAmB,aAAa,CAAC,OAAO,QAAQ,YAAY,YAAY,OAAO,YAAY;AACxH,MAAa,mBAAmB,UAAmB,cAAc;CAC/D,SAAS;CACT,eAAe,YAAY,eAAe,IAAI,KAAA;AAChD;AACA,MAAa,cAAc,QAAiB,UAAmB,aAAa,CAAC,OAAO,MAAM,SAAS,YAAY,gBAAgB,OAAO,cAAc,OAAO,aAAa"}
+{"version":3,"file":"style.mjs","names":["clsx"],"sources":["../../src/Highlighter/style.ts"],"sourcesContent":["import './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { stylish } from '@/styles/stylex/stylish';\n\nimport type { HighlighterProps } from './type';\n\nexport const actionsHoverCls = 'ant-highlighter-highlighter-hover-actions lobe-highlighter-actions';\nexport const langHoverCls = 'ant-highlighter-highlighter-hover-lang lobe-highlighter-lang';\nexport const expandCls = 'ant-highlighter-highlighter-body-expand';\nexport const prefix = 'ant-highlighter';\n\nexport const styles = stylex.create({\n  actions: {\n    insetBlockStart: 8,\n    insetInlineEnd: 8,\n    opacity: 0,\n    position: 'absolute',\n    zIndex: 2,\n  },\n  body: {\n    overflow: 'hidden',\n    transition: `opacity 0.25s ${cssVar.motionEaseOut}`,\n  },\n  bodyCollapsed: {\n    opacity: 0,\n  },\n  bodyDivider: {\n    borderBlockStartColor: cssVar.colorFillQuaternary,\n    borderBlockStartStyle: 'solid',\n    borderBlockStartWidth: 1,\n  },\n  filled: {\n    backgroundColor: cssVar.colorFillQuaternary,\n  },\n  header: {\n    cursor: 'pointer',\n    position: 'relative',\n  },\n  headerFilled: {\n    backgroundColor: 'transparent',\n  },\n  root: {\n    borderRadius: cssVar.borderRadius,\n    overflow: 'hidden',\n    transition: `background-color 100ms ${cssVar.motionEaseOut}`,\n    position: 'relative',\n    width: '100%',\n  },\n  shadow: {\n    boxShadow: `0 1px 0 -1px ${cssVar.colorBorder}, 0 1px 2px -0.5px ${cssVar.colorBorder}, 0 2px 2px -1px ${cssVar.colorBorderSecondary}, 0 3px 6px -4px ${cssVar.colorBorderSecondary}`,\n  },\n});\n\ntype Variant = NonNullable<HighlighterProps['variant']>;\n\nconst variantStyles = {\n  borderless: stylish.variantBorderlessWithoutHover,\n  filled: [stylish.variantFilledWithoutHover, styles.filled],\n  outlined: stylish.variantOutlinedWithoutHover,\n};\n\nexport const rootStyles = ({\n  shadow,\n  variant = 'filled',\n}: {\n  shadow?: boolean;\n  variant?: Variant;\n}) => [styles.root, variantStyles[variant], shadow && styles.shadow];\n\nexport const rootClassName = (wrap?: boolean, className?: string) =>\n  clsx(\n    prefix,\n    'lobe-highlighter',\n    wrap ? 'lobe-highlighter-wrap' : 'lobe-highlighter-nowrap',\n    className,\n  );\n\nexport const headerStyles = (variant: Variant = 'filled') => [\n  styles.header,\n  variant === 'filled' && styles.headerFilled,\n];\n\nexport const headerFlexProps = (variant: Variant = 'filled') => ({\n  padding: 4,\n  paddingInline: variant === 'borderless' ? 0 : undefined,\n});\n\nexport const bodyStyles = (expand: boolean, variant: Variant = 'filled') => [\n  styles.body,\n  expand ? variant !== 'borderless' && styles.bodyDivider : styles.bodyCollapsed,\n];\n"],"mappings":";;;AAOA,MAAa,kBAAkB;AAC/B,MAAa,eAAe;AAC5B,MAAa,YAAY;AACzB,MAAa,SAAS;AACtB,MAAa,SAAS;CACpB,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;AACF;AAEA,MAAM,gBAAgB;CACpB,YAAY,QAAQ;CACpB,QAAQ,CAAC,QAAQ,2BAA2B,OAAO,MAAM;CACzD,UAAU,QAAQ;AACpB;AACA,MAAa,cAAc,EACzB,QACA,UAAU,eAIN;CAAC,OAAO;CAAM,cAAc;CAAU,UAAU,OAAO;AAAM;AACnE,MAAa,iBAAiB,MAAgB,cAAuBA,OAAK,QAAQ,oBAAoB,OAAO,0BAA0B,2BAA2B,SAAS;AAC3K,MAAa,gBAAgB,UAAmB,aAAa,CAAC,OAAO,QAAQ,YAAY,YAAY,OAAO,YAAY;AACxH,MAAa,mBAAmB,UAAmB,cAAc;CAC/D,SAAS;CACT,eAAe,YAAY,eAAe,IAAI,KAAA;AAChD;AACA,MAAa,cAAc,QAAiB,UAAmB,aAAa,CAAC,OAAO,MAAM,SAAS,YAAY,gBAAgB,OAAO,cAAc,OAAO,aAAa"}

package/es/HotkeyInput/HotkeyInput.mjs

@@ -4,6 +4,7 @@ import { useThemeMode } from "../styles/theme/scope.mjs";
 import { NORMATIVE_MODIFIER, checkIsAppleDevice, splitKeysByPlus } from "../Hotkey/utils.mjs";
 import Hotkey from "../Hotkey/Hotkey.mjs";
 import ActionIcon from "../ActionIcon/ActionIcon.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
 import { useTranslation } from "../i18n/useTranslation.mjs";
 import hotkey_default from "../i18n/resources/en/hotkey.mjs";
 import { styles } from "./style.mjs";
@@ -12,7 +13,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
 import { Undo2Icon, XIcon } from "lucide-react";
 import { isEqual } from "es-toolkit/compat";
-import useControlledState from "use-merge-value";
 import { useHotkeys, useRecordHotkeys } from "react-hotkeys-hook";
 //#region src/HotkeyInput/HotkeyInput.tsx
 const HotkeyInput = memo(({ value = "", defaultValue = "", resetValue = "", onChange, onClear, onConflict, placeholder, disabled, shadow, allowClear, allowReset = true, style, className, hotkeyConflicts = [], variant, texts, isApple, onBlur, onReset, onFocus }) => {