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

package/es/Tree/Tree.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.mjs","names":[],"sources":["../../src/Tree/Tree.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo, useId, useMemo, useRef, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { FocusScope, focusScopeItem, useScopeArrowNav } from '@/FocusScope';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { TreeContext, type TreeContextValue } from './context';\nimport { styles } from './style';\nimport TreeNode from './TreeNode';\nimport type { TreeDataNode, TreeProps } from './type';\nimport { conductCheck, flattenVisible, getAllKeys, getAncestorKeys, getSubtreeKeys } from './utils';\n\nconst EMPTY: string[] = [];\n\nconst Tree = memo<TreeProps>(\n  ({\n    blockNode = false,\n    checkStrictly = false,\n    checkable = false,\n    checkedKeys: checkedKeysProp,\n    className,\n    classNames = {},\n    defaultCheckedKeys = EMPTY,\n    defaultExpandAll = false,\n    defaultExpandedKeys = EMPTY,\n    defaultSelectedKeys = EMPTY,\n    disabled = false,\n    expandedKeys: expandedKeysProp,\n    indent = 20,\n    multiple = false,\n    onCheck,\n    onExpand,\n    onRightClick,\n    onSelect,\n    scopeId: scopeIdProp,\n    selectedKeys: selectedKeysProp,\n    showIcon = false,\n    showLine = false,\n    size = 'middle',\n    style,\n    styles: customStyles = {},\n    switcherIcon,\n    titleRender,\n    treeData,\n    vimKeys = false,\n  }) => {\n    const generatedId = useId();\n    const scopeId = scopeIdProp ?? generatedId;\n    const [expandedKeys, setExpandedKeys] = useControlledState<string[]>(\n      defaultExpandAll ? getAllKeys(treeData) : defaultExpandedKeys,\n      { value: expandedKeysProp },\n    );\n    const [selectedKeys, setSelectedKeys] = useControlledState<string[]>(defaultSelectedKeys, {\n      value: selectedKeysProp,\n    });\n    const [checkedKeys, setCheckedKeys] = useControlledState<string[]>(defaultCheckedKeys, {\n      value: checkedKeysProp,\n    });\n\n    const expanded = useMemo(() => new Set(expandedKeys), [expandedKeys]);\n    const selected = useMemo(() => new Set(selectedKeys), [selectedKeys]);\n    const flat = useMemo(() => flattenVisible(treeData, expanded), [treeData, expanded]);\n    const { checked, halfChecked } = useMemo(\n      () =>\n        checkStrictly\n          ? { checked: new Set(checkedKeys), halfChecked: new Set<string>() }\n          : conductCheck(treeData, checkedKeys),\n      [checkStrictly, treeData, checkedKeys],\n    );\n\n    const [activeKeyState, setActiveKeyState] = useState<string | null>(null);\n    const setActiveKey = setActiveKeyState;\n    const activeKey =\n      activeKeyState && flat.some((row) => row.node.key === activeKeyState)\n        ? activeKeyState\n        : (selectedKeys.find((key) => flat.some((row) => row.node.key === key)) ??\n          flat[0]?.node.key ??\n          null);\n\n    const anchorRef = useRef<string | null>(null);\n\n    const rowOf = (key: string) =>\n      document.querySelector<HTMLElement>(`[data-focus-scope=\"${scopeId}\"] [data-id=\"${key}\"]`);\n    const focusRow = (key: string) => {\n      setActiveKey(key);\n      const row = rowOf(key);\n      if (row) focusScopeItem(scopeId, row);\n    };\n\n    const isDisabled = (node: TreeDataNode) => disabled || !!node.disabled;\n\n    const toggleExpand = (node: TreeDataNode) => {\n      const willExpand = !expanded.has(node.key);\n      const next = willExpand\n        ? [...expandedKeys, node.key]\n        : expandedKeys.filter((key) => key !== node.key);\n      setExpandedKeys(next);\n      onExpand?.(next, { expanded: willExpand, node });\n    };\n\n    const toggleSelect: TreeContextValue['toggleSelect'] = (node, event) => {\n      if (isDisabled(node) || node.selectable === false) return;\n      let next: string[];\n      if (multiple && event?.shiftKey && anchorRef.current) {\n        const a = flat.findIndex((row) => row.node.key === anchorRef.current);\n        const b = flat.findIndex((row) => row.node.key === node.key);\n        next = flat\n          .slice(Math.min(a, b), Math.max(a, b) + 1)\n          .filter((row) => !isDisabled(row.node) && row.node.selectable !== false)\n          .map((row) => row.node.key);\n      } else if (multiple && (event?.metaKey || event?.ctrlKey)) {\n        next = selected.has(node.key)\n          ? selectedKeys.filter((key) => key !== node.key)\n          : [...selectedKeys, node.key];\n        anchorRef.current = node.key;\n      } else {\n        next = [node.key];\n        anchorRef.current = node.key;\n      }\n      setSelectedKeys(next);\n      setActiveKey(node.key);\n      onSelect?.(next, { node, selected: next.includes(node.key) });\n    };\n\n    const toggleCheck = (node: TreeDataNode) => {\n      if (isDisabled(node) || node.checkable === false) return;\n      const willCheck = !checked.has(node.key);\n      const keys = checkStrictly ? [node.key] : getSubtreeKeys(node);\n      const base = new Set(checkStrictly ? checkedKeys : checked);\n      keys.forEach((key) => (willCheck ? base.add(key) : base.delete(key)));\n      if (!willCheck && !checkStrictly)\n        getAncestorKeys(treeData, node.key).forEach((key) => base.delete(key));\n      const next = checkStrictly ? [...base] : [...conductCheck(treeData, base).checked];\n      setCheckedKeys(next);\n      setActiveKey(node.key);\n      onCheck?.(next, { checked: willCheck, node });\n    };\n\n    const currentRow = () => {\n      const focused = document.activeElement?.closest<HTMLElement>('[role=\"treeitem\"]');\n      const key = focused?.dataset.id ?? activeKey;\n      return flat.find((row) => row.node.key === key);\n    };\n\n    const withRow =\n      (fn: (row: (typeof flat)[number], event: KeyboardEvent) => void) =>\n      (event: KeyboardEvent) => {\n        const row = currentRow();\n        if (row) fn(row, event);\n      };\n\n    useScopeArrowNav({\n      extra: {\n        ' ': withRow((row, event) => {\n          if (checkable && row.node.checkable !== false) toggleCheck(row.node);\n          else toggleSelect(row.node, event);\n        }),\n        '*': withRow((row) => {\n          const siblings = flat.filter(\n            (r) => r.parentKey === row.parentKey && r.hasChildren && !expanded.has(r.node.key),\n          );\n          if (siblings.length === 0) return;\n          const next = [...expandedKeys, ...siblings.map((r) => r.node.key)];\n          setExpandedKeys(next);\n          onExpand?.(next, { expanded: true, node: row.node });\n        }),\n        'ArrowLeft': withRow((row) => {\n          if (row.hasChildren && expanded.has(row.node.key)) toggleExpand(row.node);\n          else if (row.parentKey) focusRow(row.parentKey);\n        }),\n        'ArrowRight': withRow((row) => {\n          if (!row.hasChildren) return;\n          if (expanded.has(row.node.key)) focusRow(flat[row.index + 1].node.key);\n          else toggleExpand(row.node);\n        }),\n        'Enter': withRow((row, event) => toggleSelect(row.node, event)),\n      },\n      itemSelector: '[role=\"treeitem\"]',\n      onItemFocus: (el) => el.dataset.id && setActiveKey(el.dataset.id),\n      scopeId,\n      vimKeys,\n    });\n\n    const ctx: TreeContextValue = {\n      activeKey,\n      blockNode,\n      checkable,\n      checked,\n      classNames,\n      disabled,\n      expanded,\n      halfChecked,\n      indent,\n      onRightClick: (event, node) => onRightClick?.({ event, node }),\n      selected,\n      setActiveKey,\n      showIcon,\n      showLine,\n      size,\n      styles: customStyles,\n      switcherIcon,\n      titleRender,\n      toggleCheck,\n      toggleExpand,\n      toggleSelect,\n    };\n\n    return (\n      <TreeContext value={ctx}>\n        <FocusScope\n          id={scopeId}\n          role=\"tree\"\n          {...styleProps(styles.root, clsx(classNames.root, className), {\n            ...customStyles.root,\n            ...style,\n          })}\n        >\n          {treeData.map((node, i) => (\n            <TreeNode\n              depth={0}\n              isLast={i === treeData.length - 1}\n              key={node.key}\n              node={node}\n              trail={[]}\n            />\n          ))}\n        </FocusScope>\n      </TreeContext>\n    );\n  },\n);\n\nTree.displayName = 'Tree';\n\nexport default Tree;\n"],"mappings":"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"}
+{"version":3,"file":"Tree.mjs","names":["clsx"],"sources":["../../src/Tree/Tree.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo, useId, useMemo, useRef, useState } from 'react';\n\nimport { FocusScope, focusScopeItem, useScopeArrowNav } from '@/FocusScope';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { TreeContext, type TreeContextValue } from './context';\nimport { styles } from './style';\nimport TreeNode from './TreeNode';\nimport type { TreeDataNode, TreeProps } from './type';\nimport { conductCheck, flattenVisible, getAllKeys, getAncestorKeys, getSubtreeKeys } from './utils';\n\nconst EMPTY: string[] = [];\n\nconst Tree = memo<TreeProps>(\n  ({\n    blockNode = false,\n    checkStrictly = false,\n    checkable = false,\n    checkedKeys: checkedKeysProp,\n    className,\n    classNames = {},\n    defaultCheckedKeys = EMPTY,\n    defaultExpandAll = false,\n    defaultExpandedKeys = EMPTY,\n    defaultSelectedKeys = EMPTY,\n    disabled = false,\n    expandedKeys: expandedKeysProp,\n    indent = 20,\n    multiple = false,\n    onCheck,\n    onExpand,\n    onRightClick,\n    onSelect,\n    scopeId: scopeIdProp,\n    selectedKeys: selectedKeysProp,\n    showIcon = false,\n    showLine = false,\n    size = 'middle',\n    style,\n    styles: customStyles = {},\n    switcherIcon,\n    titleRender,\n    treeData,\n    vimKeys = false,\n  }) => {\n    const generatedId = useId();\n    const scopeId = scopeIdProp ?? generatedId;\n    const [expandedKeys, setExpandedKeys] = useControlledState<string[]>(\n      defaultExpandAll ? getAllKeys(treeData) : defaultExpandedKeys,\n      { value: expandedKeysProp },\n    );\n    const [selectedKeys, setSelectedKeys] = useControlledState<string[]>(defaultSelectedKeys, {\n      value: selectedKeysProp,\n    });\n    const [checkedKeys, setCheckedKeys] = useControlledState<string[]>(defaultCheckedKeys, {\n      value: checkedKeysProp,\n    });\n\n    const expanded = useMemo(() => new Set(expandedKeys), [expandedKeys]);\n    const selected = useMemo(() => new Set(selectedKeys), [selectedKeys]);\n    const flat = useMemo(() => flattenVisible(treeData, expanded), [treeData, expanded]);\n    const { checked, halfChecked } = useMemo(\n      () =>\n        checkStrictly\n          ? { checked: new Set(checkedKeys), halfChecked: new Set<string>() }\n          : conductCheck(treeData, checkedKeys),\n      [checkStrictly, treeData, checkedKeys],\n    );\n\n    const [activeKeyState, setActiveKeyState] = useState<string | null>(null);\n    const setActiveKey = setActiveKeyState;\n    const activeKey =\n      activeKeyState && flat.some((row) => row.node.key === activeKeyState)\n        ? activeKeyState\n        : (selectedKeys.find((key) => flat.some((row) => row.node.key === key)) ??\n          flat[0]?.node.key ??\n          null);\n\n    const anchorRef = useRef<string | null>(null);\n\n    const rowOf = (key: string) =>\n      document.querySelector<HTMLElement>(`[data-focus-scope=\"${scopeId}\"] [data-id=\"${key}\"]`);\n    const focusRow = (key: string) => {\n      setActiveKey(key);\n      const row = rowOf(key);\n      if (row) focusScopeItem(scopeId, row);\n    };\n\n    const isDisabled = (node: TreeDataNode) => disabled || !!node.disabled;\n\n    const toggleExpand = (node: TreeDataNode) => {\n      const willExpand = !expanded.has(node.key);\n      const next = willExpand\n        ? [...expandedKeys, node.key]\n        : expandedKeys.filter((key) => key !== node.key);\n      setExpandedKeys(next);\n      onExpand?.(next, { expanded: willExpand, node });\n    };\n\n    const toggleSelect: TreeContextValue['toggleSelect'] = (node, event) => {\n      if (isDisabled(node) || node.selectable === false) return;\n      let next: string[];\n      if (multiple && event?.shiftKey && anchorRef.current) {\n        const a = flat.findIndex((row) => row.node.key === anchorRef.current);\n        const b = flat.findIndex((row) => row.node.key === node.key);\n        next = flat\n          .slice(Math.min(a, b), Math.max(a, b) + 1)\n          .filter((row) => !isDisabled(row.node) && row.node.selectable !== false)\n          .map((row) => row.node.key);\n      } else if (multiple && (event?.metaKey || event?.ctrlKey)) {\n        next = selected.has(node.key)\n          ? selectedKeys.filter((key) => key !== node.key)\n          : [...selectedKeys, node.key];\n        anchorRef.current = node.key;\n      } else {\n        next = [node.key];\n        anchorRef.current = node.key;\n      }\n      setSelectedKeys(next);\n      setActiveKey(node.key);\n      onSelect?.(next, { node, selected: next.includes(node.key) });\n    };\n\n    const toggleCheck = (node: TreeDataNode) => {\n      if (isDisabled(node) || node.checkable === false) return;\n      const willCheck = !checked.has(node.key);\n      const keys = checkStrictly ? [node.key] : getSubtreeKeys(node);\n      const base = new Set(checkStrictly ? checkedKeys : checked);\n      keys.forEach((key) => (willCheck ? base.add(key) : base.delete(key)));\n      if (!willCheck && !checkStrictly)\n        getAncestorKeys(treeData, node.key).forEach((key) => base.delete(key));\n      const next = checkStrictly ? [...base] : [...conductCheck(treeData, base).checked];\n      setCheckedKeys(next);\n      setActiveKey(node.key);\n      onCheck?.(next, { checked: willCheck, node });\n    };\n\n    const currentRow = () => {\n      const focused = document.activeElement?.closest<HTMLElement>('[role=\"treeitem\"]');\n      const key = focused?.dataset.id ?? activeKey;\n      return flat.find((row) => row.node.key === key);\n    };\n\n    const withRow =\n      (fn: (row: (typeof flat)[number], event: KeyboardEvent) => void) =>\n      (event: KeyboardEvent) => {\n        const row = currentRow();\n        if (row) fn(row, event);\n      };\n\n    useScopeArrowNav({\n      extra: {\n        ' ': withRow((row, event) => {\n          if (checkable && row.node.checkable !== false) toggleCheck(row.node);\n          else toggleSelect(row.node, event);\n        }),\n        '*': withRow((row) => {\n          const siblings = flat.filter(\n            (r) => r.parentKey === row.parentKey && r.hasChildren && !expanded.has(r.node.key),\n          );\n          if (siblings.length === 0) return;\n          const next = [...expandedKeys, ...siblings.map((r) => r.node.key)];\n          setExpandedKeys(next);\n          onExpand?.(next, { expanded: true, node: row.node });\n        }),\n        'ArrowLeft': withRow((row) => {\n          if (row.hasChildren && expanded.has(row.node.key)) toggleExpand(row.node);\n          else if (row.parentKey) focusRow(row.parentKey);\n        }),\n        'ArrowRight': withRow((row) => {\n          if (!row.hasChildren) return;\n          if (expanded.has(row.node.key)) focusRow(flat[row.index + 1].node.key);\n          else toggleExpand(row.node);\n        }),\n        'Enter': withRow((row, event) => toggleSelect(row.node, event)),\n      },\n      itemSelector: '[role=\"treeitem\"]',\n      onItemFocus: (el) => el.dataset.id && setActiveKey(el.dataset.id),\n      scopeId,\n      vimKeys,\n    });\n\n    const ctx: TreeContextValue = {\n      activeKey,\n      blockNode,\n      checkable,\n      checked,\n      classNames,\n      disabled,\n      expanded,\n      halfChecked,\n      indent,\n      onRightClick: (event, node) => onRightClick?.({ event, node }),\n      selected,\n      setActiveKey,\n      showIcon,\n      showLine,\n      size,\n      styles: customStyles,\n      switcherIcon,\n      titleRender,\n      toggleCheck,\n      toggleExpand,\n      toggleSelect,\n    };\n\n    return (\n      <TreeContext value={ctx}>\n        <FocusScope\n          id={scopeId}\n          role=\"tree\"\n          {...styleProps(styles.root, clsx(classNames.root, className), {\n            ...customStyles.root,\n            ...style,\n          })}\n        >\n          {treeData.map((node, i) => (\n            <TreeNode\n              depth={0}\n              isLast={i === treeData.length - 1}\n              key={node.key}\n              node={node}\n              trail={[]}\n            />\n          ))}\n        </FocusScope>\n      </TreeContext>\n    );\n  },\n);\n\nTree.displayName = 'Tree';\n\nexport default Tree;\n"],"mappings":"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"}

package/es/Tree/TreeNode.mjs

@@ -9,7 +9,7 @@ import { useTreeContext } from "./context.mjs";
 import { hasChildren } from "./utils.mjs";
 import { memo } 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 { ChevronRight, File, Folder } from "lucide-react";
 import { Collapsible } from "@base-ui/react/collapsible";
@@ -84,7 +84,7 @@ const TreeNode = memo(({ node, depth, isLast, trail }) => {
 				"aria-hidden": true,
 				tabIndex: -1,
 				type: "button",
-				...styleProps([styles.switcher, !expandable && styles.switcherLeaf], clsx("lobe-tree-switcher", ctx.classNames.switcher), ctx.styles.switcher),
+				...styleProps([styles.switcher, !expandable && styles.switcherLeaf], clsx$1("lobe-tree-switcher", ctx.classNames.switcher), ctx.styles.switcher),
 				onClick: (event) => {
 					event.stopPropagation();
 					ctx.toggleExpand(node);

package/es/Tree/TreeNode.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TreeNode.mjs","names":["isExpandable","Checkbox"],"sources":["../../src/Tree/TreeNode.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport { Collapsible } from '@base-ui/react/collapsible';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronRight, File, Folder } from 'lucide-react';\nimport { type CSSProperties, memo, type MouseEvent } from 'react';\n\nimport { Checkbox } from '@/Checkbox';\nimport Icon from '@/Icon';\nimport { controlHeight } from '@/internal/controlSize';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { useTreeContext } from './context';\nimport { styles } from './style';\nimport type { TreeDataNode } from './type';\nimport { hasChildren as isExpandable } from './utils';\n\ninterface TreeNodeProps {\n  depth: number;\n  isLast: boolean;\n  node: TreeDataNode;\n  trail: boolean[];\n}\n\nconst ARC = 6;\nconst SWITCHER_CENTER = 11.5;\n\nconst guidePath = (\n  depth: number,\n  isLast: boolean,\n  trail: boolean[],\n  indent: number,\n  height: number,\n) => {\n  const cx = (i: number) => i * indent + SWITCHER_CENTER;\n  let d = '';\n  trail.forEach((more, i) => {\n    if (more && i > 0) d += `M${cx(i)} 0V${height}`;\n  });\n  const x = cx(depth - 1);\n  const y = height / 2;\n  const elbow = `M${x} ${y - ARC}A${ARC} ${ARC} 0 0 0 ${x + ARC} ${y}H${x + indent - 2}`;\n  d += isLast\n    ? `M${x} 0V${y - ARC}${elbow.slice(elbow.indexOf('A'))}`\n    : `M${x} 0V${height}${elbow}`;\n  return d;\n};\n\nconst TreeNode = memo<TreeNodeProps>(({ node, depth, isLast, trail }) => {\n  const ctx = useTreeContext();\n  const expandable = isExpandable(node);\n  const expanded = expandable && ctx.expanded.has(node.key);\n  const disabled = ctx.disabled || !!node.disabled;\n  const selected = ctx.selected.has(node.key);\n  const checkable = ctx.checkable && node.checkable !== false;\n  const checkState = ctx.checked.has(node.key)\n    ? 'checked'\n    : ctx.halfChecked.has(node.key)\n      ? 'mixed'\n      : 'unchecked';\n  const rowHeight =\n    typeof ctx.styles.node?.height === 'number' ? ctx.styles.node.height : controlHeight[ctx.size];\n\n  const switcherIcon =\n    typeof ctx.switcherIcon === 'function'\n      ? ctx.switcherIcon({ expanded, node })\n      : (ctx.switcherIcon ?? <Icon icon={ChevronRight} size={14} />);\n\n  const rowStyle: CSSProperties = {\n    height: rowHeight,\n    paddingInlineStart: depth * ctx.indent,\n    ...ctx.styles.node,\n  };\n\n  const select = (event: MouseEvent) => ctx.toggleSelect(node, event);\n\n  return (\n    <>\n      <div\n        data-scope-item\n        aria-disabled={disabled || undefined}\n        aria-expanded={expandable ? expanded : undefined}\n        aria-level={depth + 1}\n        aria-selected={selected}\n        data-id={node.key}\n        role=\"treeitem\"\n        tabIndex={ctx.activeKey === node.key ? 0 : -1}\n        aria-checked={\n          checkable ? (checkState === 'mixed' ? 'mixed' : checkState === 'checked') : undefined\n        }\n        {...styleProps(\n          [\n            styles.node,\n            focusRing.info,\n            ctx.blockNode && [\n              styles.nodeBlock,\n              disabled\n                ? selected && styles.nodeDisabledSelected\n                : selected\n                  ? styles.nodeSelected\n                  : styles.nodeHover,\n            ],\n            disabled && styles.nodeDisabled,\n          ],\n          ctx.classNames.node,\n          rowStyle,\n        )}\n        onClick={ctx.blockNode ? select : undefined}\n        onContextMenu={(event) => ctx.onRightClick(event, node)}\n        onFocus={() => ctx.setActiveKey(node.key)}\n      >\n        {ctx.showLine && depth > 0 && (\n          <svg\n            aria-hidden\n            height={rowHeight}\n            width={depth * ctx.indent}\n            {...styleProps(styles.guide, ctx.classNames.guide, ctx.styles.guide)}\n          >\n            <path\n              {...stylex.props(styles.guidePath)}\n              d={guidePath(depth, isLast, trail, ctx.indent, rowHeight)}\n            />\n          </svg>\n        )}\n        <button\n          aria-hidden\n          tabIndex={-1}\n          type=\"button\"\n          {...styleProps(\n            [styles.switcher, !expandable && styles.switcherLeaf],\n            clsx('lobe-tree-switcher', ctx.classNames.switcher),\n            ctx.styles.switcher,\n          )}\n          onClick={(event) => {\n            event.stopPropagation();\n            ctx.toggleExpand(node);\n          }}\n        >\n          {switcherIcon}\n        </button>\n        {checkable && (\n          <Checkbox\n            checked={checkState === 'checked'}\n            className={stylex.props(styles.checkbox).className}\n            disabled={disabled}\n            indeterminate={checkState === 'mixed'}\n            onChange={() => ctx.toggleCheck(node)}\n            onClick={(event) => event.stopPropagation()}\n          />\n        )}\n        {ctx.showIcon && (\n          <span {...stylex.props(styles.icon)}>\n            {node.icon ?? <Icon icon={expandable ? Folder : File} size={16} />}\n          </span>\n        )}\n        <span\n          {...styleProps(\n            [\n              styles.title,\n              ctx.blockNode\n                ? styles.titleBlock\n                : [\n                    styles.titleInline,\n                    selected && styles.titleInlineSelected,\n                    disabled && styles.titleInlineDisabled,\n                  ],\n            ],\n            ctx.classNames.title,\n            ctx.styles.title,\n          )}\n          onClick={ctx.blockNode ? undefined : select}\n        >\n          {ctx.titleRender ? ctx.titleRender(node) : node.title}\n        </span>\n      </div>\n      {expandable && (\n        <Collapsible.Root open={expanded}>\n          <Collapsible.Panel className={stylex.props(styles.panel).className}>\n            {node.children!.map((child, i) => (\n              <TreeNode\n                depth={depth + 1}\n                isLast={i === node.children!.length - 1}\n                key={child.key}\n                node={child}\n                trail={[...trail, !isLast]}\n              />\n            ))}\n          </Collapsible.Panel>\n        </Collapsible.Root>\n      )}\n    </>\n  );\n});\n\nTreeNode.displayName = 'TreeNode';\n\nexport default TreeNode;\n"],"mappings":"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"}
+{"version":3,"file":"TreeNode.mjs","names":["isExpandable","clsx","Checkbox"],"sources":["../../src/Tree/TreeNode.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport { Collapsible } from '@base-ui/react/collapsible';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronRight, File, Folder } from 'lucide-react';\nimport { type CSSProperties, memo, type MouseEvent } from 'react';\n\nimport { Checkbox } from '@/Checkbox';\nimport Icon from '@/Icon';\nimport { controlHeight } from '@/internal/controlSize';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { useTreeContext } from './context';\nimport { styles } from './style';\nimport type { TreeDataNode } from './type';\nimport { hasChildren as isExpandable } from './utils';\n\ninterface TreeNodeProps {\n  depth: number;\n  isLast: boolean;\n  node: TreeDataNode;\n  trail: boolean[];\n}\n\nconst ARC = 6;\nconst SWITCHER_CENTER = 11.5;\n\nconst guidePath = (\n  depth: number,\n  isLast: boolean,\n  trail: boolean[],\n  indent: number,\n  height: number,\n) => {\n  const cx = (i: number) => i * indent + SWITCHER_CENTER;\n  let d = '';\n  trail.forEach((more, i) => {\n    if (more && i > 0) d += `M${cx(i)} 0V${height}`;\n  });\n  const x = cx(depth - 1);\n  const y = height / 2;\n  const elbow = `M${x} ${y - ARC}A${ARC} ${ARC} 0 0 0 ${x + ARC} ${y}H${x + indent - 2}`;\n  d += isLast\n    ? `M${x} 0V${y - ARC}${elbow.slice(elbow.indexOf('A'))}`\n    : `M${x} 0V${height}${elbow}`;\n  return d;\n};\n\nconst TreeNode = memo<TreeNodeProps>(({ node, depth, isLast, trail }) => {\n  const ctx = useTreeContext();\n  const expandable = isExpandable(node);\n  const expanded = expandable && ctx.expanded.has(node.key);\n  const disabled = ctx.disabled || !!node.disabled;\n  const selected = ctx.selected.has(node.key);\n  const checkable = ctx.checkable && node.checkable !== false;\n  const checkState = ctx.checked.has(node.key)\n    ? 'checked'\n    : ctx.halfChecked.has(node.key)\n      ? 'mixed'\n      : 'unchecked';\n  const rowHeight =\n    typeof ctx.styles.node?.height === 'number' ? ctx.styles.node.height : controlHeight[ctx.size];\n\n  const switcherIcon =\n    typeof ctx.switcherIcon === 'function'\n      ? ctx.switcherIcon({ expanded, node })\n      : (ctx.switcherIcon ?? <Icon icon={ChevronRight} size={14} />);\n\n  const rowStyle: CSSProperties = {\n    height: rowHeight,\n    paddingInlineStart: depth * ctx.indent,\n    ...ctx.styles.node,\n  };\n\n  const select = (event: MouseEvent) => ctx.toggleSelect(node, event);\n\n  return (\n    <>\n      <div\n        data-scope-item\n        aria-disabled={disabled || undefined}\n        aria-expanded={expandable ? expanded : undefined}\n        aria-level={depth + 1}\n        aria-selected={selected}\n        data-id={node.key}\n        role=\"treeitem\"\n        tabIndex={ctx.activeKey === node.key ? 0 : -1}\n        aria-checked={\n          checkable ? (checkState === 'mixed' ? 'mixed' : checkState === 'checked') : undefined\n        }\n        {...styleProps(\n          [\n            styles.node,\n            focusRing.info,\n            ctx.blockNode && [\n              styles.nodeBlock,\n              disabled\n                ? selected && styles.nodeDisabledSelected\n                : selected\n                  ? styles.nodeSelected\n                  : styles.nodeHover,\n            ],\n            disabled && styles.nodeDisabled,\n          ],\n          ctx.classNames.node,\n          rowStyle,\n        )}\n        onClick={ctx.blockNode ? select : undefined}\n        onContextMenu={(event) => ctx.onRightClick(event, node)}\n        onFocus={() => ctx.setActiveKey(node.key)}\n      >\n        {ctx.showLine && depth > 0 && (\n          <svg\n            aria-hidden\n            height={rowHeight}\n            width={depth * ctx.indent}\n            {...styleProps(styles.guide, ctx.classNames.guide, ctx.styles.guide)}\n          >\n            <path\n              {...stylex.props(styles.guidePath)}\n              d={guidePath(depth, isLast, trail, ctx.indent, rowHeight)}\n            />\n          </svg>\n        )}\n        <button\n          aria-hidden\n          tabIndex={-1}\n          type=\"button\"\n          {...styleProps(\n            [styles.switcher, !expandable && styles.switcherLeaf],\n            clsx('lobe-tree-switcher', ctx.classNames.switcher),\n            ctx.styles.switcher,\n          )}\n          onClick={(event) => {\n            event.stopPropagation();\n            ctx.toggleExpand(node);\n          }}\n        >\n          {switcherIcon}\n        </button>\n        {checkable && (\n          <Checkbox\n            checked={checkState === 'checked'}\n            className={stylex.props(styles.checkbox).className}\n            disabled={disabled}\n            indeterminate={checkState === 'mixed'}\n            onChange={() => ctx.toggleCheck(node)}\n            onClick={(event) => event.stopPropagation()}\n          />\n        )}\n        {ctx.showIcon && (\n          <span {...stylex.props(styles.icon)}>\n            {node.icon ?? <Icon icon={expandable ? Folder : File} size={16} />}\n          </span>\n        )}\n        <span\n          {...styleProps(\n            [\n              styles.title,\n              ctx.blockNode\n                ? styles.titleBlock\n                : [\n                    styles.titleInline,\n                    selected && styles.titleInlineSelected,\n                    disabled && styles.titleInlineDisabled,\n                  ],\n            ],\n            ctx.classNames.title,\n            ctx.styles.title,\n          )}\n          onClick={ctx.blockNode ? undefined : select}\n        >\n          {ctx.titleRender ? ctx.titleRender(node) : node.title}\n        </span>\n      </div>\n      {expandable && (\n        <Collapsible.Root open={expanded}>\n          <Collapsible.Panel className={stylex.props(styles.panel).className}>\n            {node.children!.map((child, i) => (\n              <TreeNode\n                depth={depth + 1}\n                isLast={i === node.children!.length - 1}\n                key={child.key}\n                node={child}\n                trail={[...trail, !isLast]}\n              />\n            ))}\n          </Collapsible.Panel>\n        </Collapsible.Root>\n      )}\n    </>\n  );\n});\n\nTreeNode.displayName = 'TreeNode';\n\nexport default TreeNode;\n"],"mappings":"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"}

package/es/Video/Video.mjs

@@ -0,0 +1,46 @@
+"use client";
+import { useVideo } from "./useVideo.mjs";
+import Caption from "./parts/Caption.mjs";
+import CenterPlay from "./parts/CenterPlay.mjs";
+import Timeline from "./parts/Timeline.mjs";
+import Controls from "./parts/Controls.mjs";
+import Frame from "./parts/Frame.mjs";
+import LoadError from "./parts/LoadError.mjs";
+import Root from "./parts/Root.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+//#region src/Video/Video.tsx
+const Overlay = ({ render }) => /* @__PURE__ */ jsx(Fragment, { children: render(useVideo()) });
+const Video = ({ className, classNames, frameStep, overlay, style, styles: customStyles, thumbnails = true, ...rest }) => /* @__PURE__ */ jsx(Root, {
+	className: clsx$1(className, classNames?.root),
+	style: {
+		...customStyles?.root,
+		...style
+	},
+	...rest,
+	children: /* @__PURE__ */ jsxs(Frame, {
+		className: classNames?.frame,
+		style: customStyles?.frame,
+		children: [
+			overlay && /* @__PURE__ */ jsx(Overlay, { render: overlay }),
+			/* @__PURE__ */ jsx(Caption, {}),
+			/* @__PURE__ */ jsx(CenterPlay, {}),
+			/* @__PURE__ */ jsx(Controls, {
+				className: classNames?.controls,
+				frameStep,
+				style: customStyles?.controls,
+				children: /* @__PURE__ */ jsx(Timeline, {
+					className: classNames?.timeline,
+					style: customStyles?.timeline,
+					thumbnails
+				})
+			}),
+			/* @__PURE__ */ jsx(LoadError, {})
+		]
+	})
+});
+Video.displayName = "Video";
+//#endregion
+export { Video as default };
+
+//# sourceMappingURL=Video.mjs.map

package/es/Video/Video.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Video.mjs","names":["clsx"],"sources":["../../src/Video/Video.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\n\nimport Caption from './parts/Caption';\nimport CenterPlay from './parts/CenterPlay';\nimport Controls from './parts/Controls';\nimport Frame from './parts/Frame';\nimport LoadError from './parts/LoadError';\nimport Root from './parts/Root';\nimport Timeline from './parts/Timeline';\nimport type { VideoProps, VideoState } from './type';\nimport { useVideo } from './useVideo';\n\nconst Overlay = ({ render }: { render: (state: VideoState) => React.ReactNode }) => (\n  <>{render(useVideo())}</>\n);\n\nconst Video = ({\n  className,\n  classNames,\n  frameStep,\n  overlay,\n  style,\n  styles: customStyles,\n  thumbnails = true,\n  ...rest\n}: VideoProps) => (\n  <Root\n    className={clsx(className, classNames?.root)}\n    style={{ ...customStyles?.root, ...style }}\n    {...rest}\n  >\n    <Frame className={classNames?.frame} style={customStyles?.frame}>\n      {overlay && <Overlay render={overlay} />}\n      <Caption />\n      <CenterPlay />\n      <Controls\n        className={classNames?.controls}\n        frameStep={frameStep}\n        style={customStyles?.controls}\n      >\n        <Timeline\n          className={classNames?.timeline}\n          style={customStyles?.timeline}\n          thumbnails={thumbnails}\n        />\n      </Controls>\n      <LoadError />\n    </Frame>\n  </Root>\n);\n\nVideo.displayName = 'Video';\n\nexport default Video;\n"],"mappings":";;;;;;;;;;;;AAcA,MAAM,WAAW,EAAE,aACjB,oBAAA,UAAA,EAAA,UAAG,OAAO,SAAS,CAAC,EAAI,CAAA;AAG1B,MAAM,SAAS,EACb,WACA,YACA,WACA,SACA,OACA,QAAQ,cACR,aAAa,MACb,GAAG,WAEH,oBAAC,MAAD;CACE,WAAWA,OAAK,WAAW,YAAY,IAAI;CAC3C,OAAO;EAAE,GAAG,cAAc;EAAM,GAAG;CAAM;CACzC,GAAI;CAEJ,UAAA,qBAAC,OAAD;EAAO,WAAW,YAAY;EAAO,OAAO,cAAc;EAA1D,UAAA;GACG,WAAW,oBAAC,SAAD,EAAS,QAAQ,QAAU,CAAA;GACvC,oBAAC,SAAD,CAAU,CAAA;GACV,oBAAC,YAAD,CAAa,CAAA;GACb,oBAAC,UAAD;IACE,WAAW,YAAY;IACZ;IACX,OAAO,cAAc;IAErB,UAAA,oBAAC,UAAD;KACE,WAAW,YAAY;KACvB,OAAO,cAAc;KACT;IACb,CAAA;GACO,CAAA;GACV,oBAAC,WAAD,CAAY,CAAA;EACP;;AACH,CAAA;AAGR,MAAM,cAAc"}

package/es/Video/context.mjs

@@ -0,0 +1,14 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/Video/context.ts
+const VideoContext = createContext(null);
+const useVideoContext = () => {
+	const value = use(VideoContext);
+	if (!value) throw new Error("Video parts must be rendered inside <Video.Root>.");
+	return value;
+};
+const FrameContext = createContext(null);
+//#endregion
+export { FrameContext, VideoContext, useVideoContext };
+
+//# sourceMappingURL=context.mjs.map

package/es/Video/context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.mjs","names":[],"sources":["../../src/Video/context.ts"],"sourcesContent":["'use client';\n\nimport { createContext, use } from 'react';\n\nimport type { VideoStore } from './store';\nimport type { VideoMarker, VideoMediaProps, VideoSection } from './type';\n\nexport interface VideoConfig {\n  fps: number;\n  markers: VideoMarker[];\n  onMarkerClick?: (marker: VideoMarker) => void;\n  onRetry?: () => Promise<unknown> | void;\n  playbackRates?: number[];\n  sections: VideoSection[];\n}\n\nexport interface VideoContextValue {\n  config: VideoConfig;\n  media: VideoMediaProps;\n  store: VideoStore;\n}\n\nexport const VideoContext = createContext<VideoContextValue | null>(null);\n\nexport const useVideoContext = () => {\n  const value = use(VideoContext);\n  if (!value) throw new Error('Video parts must be rendered inside <Video.Root>.');\n  return value;\n};\n\nexport interface FrameContextValue {\n  hold: (held: boolean) => void;\n  overlay: boolean;\n  setOverlay: (overlay: boolean) => void;\n  visible: boolean;\n}\n\nexport const FrameContext = createContext<FrameContextValue | null>(null);\n"],"mappings":";;;AAsBA,MAAa,eAAe,cAAwC,IAAI;AAExE,MAAa,wBAAwB;CACnC,MAAM,QAAQ,IAAI,YAAY;CAC9B,IAAI,CAAC,OAAO,MAAM,IAAI,MAAM,mDAAmD;CAC/E,OAAO;AACT;AASA,MAAa,eAAe,cAAwC,IAAI"}

package/es/Video/index.d.mts

@@ -1,43 +1,27 @@
-import { FlexboxProps } from "../Flex/type.mjs";
-import "../Flex/index.mjs";
-import { VideoProps as VideoProps$1 } from "../types/index.mjs";
-import { CSSProperties, Ref } from "react";
+import { VideoCaptionProps, VideoControlsProps, VideoFrameProps, VideoMarker, VideoMarkerColor, VideoMediaProps, VideoPlayer, VideoProps, VideoRootProps, VideoSection, VideoSectionListProps, VideoState, VideoStatus, VideoTimelineProps } from "./type.mjs";
+import Caption from "./parts/Caption.mjs";
+import CenterPlay from "./parts/CenterPlay.mjs";
+import Controls from "./parts/Controls.mjs";
+import Frame from "./parts/Frame.mjs";
+import LoadError from "./parts/LoadError.mjs";
+import Root from "./parts/Root.mjs";
+import SectionList from "./parts/SectionList.mjs";
+import Timeline from "./parts/Timeline.mjs";
+import { useVideo, useVideoPlayer, useVideoState } from "./useVideo.mjs";
+import { ReactNode } from "react";
 //#region src/Video/index.d.ts
-export interface VideoProps extends VideoProps$1, Pick<FlexboxProps, 'width' | 'height'> {
-  autoPlay?: boolean;
-  classNames?: {
-    mask?: string;
-    video?: string;
-    wrapper?: string;
-  };
-  isLoading?: boolean;
-  loop?: boolean;
-  maxHeight?: number | string;
-  maxWidth?: number | string;
-  minHeight?: number | string;
-  minWidth?: number | string;
-  muted?: HTMLVideoElement['muted'];
-  onEnded?: VideoProps$1['onEnded'];
-  onMouseEnter?: VideoProps$1['onMouseEnter'];
-  onMouseLeave?: VideoProps$1['onMouseLeave'];
-  onPause?: VideoProps$1['onPause'];
-  onPlay?: VideoProps$1['onPlay'];
-  onPlaying?: VideoProps$1['onPlaying'];
-  onProgress?: VideoProps$1['onProgress'];
-  poster?: string;
-  preload?: HTMLVideoElement['preload'];
-  preview?: boolean;
-  ref?: Ref<HTMLDivElement>;
-  size?: number | string;
-  src: string;
-  styles?: {
-    mask?: CSSProperties;
-    video?: CSSProperties;
-    wrapper?: CSSProperties;
-  };
-  variant?: 'borderless' | 'filled' | 'outlined';
+export interface IVideo {
+  (props: VideoProps): ReactNode;
+  Caption: typeof Caption;
+  CenterPlay: typeof CenterPlay;
+  Controls: typeof Controls;
+  Frame: typeof Frame;
+  LoadError: typeof LoadError;
+  Root: typeof Root;
+  SectionList: typeof SectionList;
+  Timeline: typeof Timeline;
 }
-declare const Video: import("react").NamedExoticComponent<VideoProps>;
+declare const Video: IVideo;
 //#endregion
-export { Video as default };
+export { type VideoCaptionProps, type VideoControlsProps, type VideoFrameProps, type VideoMarker, type VideoMarkerColor, type VideoMediaProps, type VideoPlayer, type VideoProps, type VideoRootProps, type VideoSection, type VideoSectionListProps, type VideoState, type VideoStatus, type VideoTimelineProps, Video as default, useVideo, useVideoPlayer, useVideoState };
 //# sourceMappingURL=index.d.mts.map

package/es/Video/index.mjs

@@ -1,114 +1,24 @@
-"use client";
-import { styleProps } from "../styles/stylex/props.mjs";
-import { cssVar } from "../styles/stylex/cssVar.stylex.mjs";
-import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import { stylish } from "../styles/stylex/stylish.mjs";
-import ActionIcon from "../ActionIcon/ActionIcon.mjs";
-import Skeleton from "../Skeleton/index.mjs";
-import { videoMarker } from "./marker.stylex.mjs";
-import { styles } from "./style.mjs";
-import { memo, useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { PlayIcon } from "lucide-react";
-//#region src/Video/index.tsx
-const variantStyles = {
-	borderless: stylish.variantBorderlessWithoutHover,
-	filled: styles.filled,
-	outlined: stylish.variantOutlinedWithoutHover
-};
-const Video = memo(({ ref, preload = "auto", src, style, classNames, className, maxHeight = "100%", maxWidth = "100%", minHeight, minWidth, onEnded, onPause, onPlay, onPlaying, width, height, onMouseEnter, styles: customStyles, onMouseLeave, preview = true, isLoading, variant = "filled", autoPlay, ...rest }) => {
-	const [isPlaying, setIsPlaying] = useState(false);
-	const [showControls, setShowControls] = useState(false);
-	const cssVariables = useMemo(() => {
-		const vars = {};
-		if (maxHeight !== void 0) vars["--video-max-height"] = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
-		if (maxWidth !== void 0) vars["--video-max-width"] = typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth;
-		if (minHeight !== void 0) vars["--video-min-height"] = typeof minHeight === "number" ? `${minHeight}px` : minHeight;
-		if (minWidth !== void 0) vars["--video-min-width"] = typeof minWidth === "number" ? `${minWidth}px` : minWidth;
-		return vars;
-	}, [
-		maxHeight,
-		maxWidth,
-		minHeight,
-		minWidth
-	]);
-	if (isLoading) return /* @__PURE__ */ jsx(Skeleton, {
-		radius: cssVar.borderRadiusLG,
-		style: {
-			height,
-			maxHeight,
-			maxWidth,
-			minHeight,
-			minWidth,
-			width
-		}
-	});
-	return /* @__PURE__ */ jsxs(FlexBasic_default, {
-		height,
-		ref,
-		width,
-		className: styleProps([
-			styles.root,
-			variantStyles[variant],
-			videoMarker
-		], clsx(className, classNames?.wrapper)).className,
-		style: {
-			...cssVariables,
-			...style,
-			...customStyles?.wrapper
-		},
-		children: [preview && !isPlaying && /* @__PURE__ */ jsx(FlexBasic_default, {
-			align: "center",
-			justify: "center",
-			...styleProps(styles.mask, clsx("lobe-video-mask", classNames?.mask), customStyles?.mask),
-			children: /* @__PURE__ */ jsx(ActionIcon, {
-				color: "#fff",
-				icon: PlayIcon,
-				variant: "filled"
-			})
-		}), /* @__PURE__ */ jsx("video", {
-			autoPlay,
-			controls: showControls,
-			height,
-			preload,
-			width,
-			...styleProps(styles.video, classNames?.video, {
-				height: "auto",
-				maxWidth: "100%",
-				...customStyles?.video
-			}),
-			onEnded: (e) => {
-				setIsPlaying(false);
-				onEnded?.(e);
-			},
-			onMouseEnter: (e) => {
-				setShowControls(true);
-				onMouseEnter?.(e);
-			},
-			onMouseLeave: (e) => {
-				setShowControls(false);
-				onMouseLeave?.(e);
-			},
-			onPause: (e) => {
-				setIsPlaying(false);
-				onPause?.(e);
-			},
-			onPlay: (e) => {
-				setIsPlaying(true);
-				onPlay?.(e);
-			},
-			onPlaying: (e) => {
-				setIsPlaying(true);
-				onPlaying?.(e);
-			},
-			...rest,
-			children: /* @__PURE__ */ jsx("source", { src })
-		})]
-	});
-});
-Video.displayName = "Video";
+import { useVideo, useVideoPlayer, useVideoState } from "./useVideo.mjs";
+import Caption from "./parts/Caption.mjs";
+import CenterPlay from "./parts/CenterPlay.mjs";
+import Timeline from "./parts/Timeline.mjs";
+import Controls from "./parts/Controls.mjs";
+import Frame from "./parts/Frame.mjs";
+import LoadError from "./parts/LoadError.mjs";
+import Root from "./parts/Root.mjs";
+import SectionList from "./parts/SectionList.mjs";
+import Video$1 from "./Video.mjs";
+//#region src/Video/index.ts
+const Video = Video$1;
+Video.Caption = Caption;
+Video.CenterPlay = CenterPlay;
+Video.Controls = Controls;
+Video.Frame = Frame;
+Video.LoadError = LoadError;
+Video.Root = Root;
+Video.SectionList = SectionList;
+Video.Timeline = Timeline;
 //#endregion
-export { Video as default };
+export { Video as default, useVideo, useVideoPlayer, useVideoState };
 
 //# sourceMappingURL=index.mjs.map

package/es/Video/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Flexbox"],"sources":["../../src/Video/index.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { PlayIcon } from 'lucide-react';\nimport { type CSSProperties, memo, type Ref, useMemo, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox, type FlexboxProps } from '@/Flex';\nimport Skeleton from '@/Skeleton';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { stylish } from '@/styles/stylex/stylish';\nimport { type VideoProps as VProps } from '@/types';\n\nimport { videoMarker } from './marker.stylex';\nimport { maskHoverCls, styles } from './style';\n\nconst variantStyles = {\n  borderless: stylish.variantBorderlessWithoutHover,\n  filled: styles.filled,\n  outlined: stylish.variantOutlinedWithoutHover,\n};\n\nexport interface VideoProps extends VProps, Pick<FlexboxProps, 'width' | 'height'> {\n  autoPlay?: boolean;\n  classNames?: {\n    mask?: string;\n    video?: string;\n    wrapper?: string;\n  };\n  isLoading?: boolean;\n  loop?: boolean;\n  maxHeight?: number | string;\n  maxWidth?: number | string;\n  minHeight?: number | string;\n  minWidth?: number | string;\n  muted?: HTMLVideoElement['muted'];\n  onEnded?: VProps['onEnded'];\n  onMouseEnter?: VProps['onMouseEnter'];\n  onMouseLeave?: VProps['onMouseLeave'];\n  onPause?: VProps['onPause'];\n  onPlay?: VProps['onPlay'];\n  onPlaying?: VProps['onPlaying'];\n  onProgress?: VProps['onProgress'];\n  poster?: string;\n  preload?: HTMLVideoElement['preload'];\n  preview?: boolean;\n  ref?: Ref<HTMLDivElement>;\n  size?: number | string;\n  src: string;\n  styles?: {\n    mask?: CSSProperties;\n    video?: CSSProperties;\n    wrapper?: CSSProperties;\n  };\n  variant?: 'borderless' | 'filled' | 'outlined';\n}\n\nconst Video = memo<VideoProps>(\n  ({\n    ref,\n    preload = 'auto',\n    src,\n    style,\n    classNames,\n    className,\n    maxHeight = '100%',\n    maxWidth = '100%',\n    minHeight,\n    minWidth,\n    onEnded,\n    onPause,\n    onPlay,\n    onPlaying,\n    width,\n    height,\n    onMouseEnter,\n    styles: customStyles,\n    onMouseLeave,\n    preview = true,\n    isLoading,\n    variant = 'filled',\n    autoPlay,\n    ...rest\n  }) => {\n    const [isPlaying, setIsPlaying] = useState(false);\n    const [showControls, setShowControls] = useState(false);\n\n    // Convert props to CSS variables\n    const cssVariables = useMemo<Record<string, string>>(() => {\n      const vars: Record<string, string> = {};\n      if (maxHeight !== undefined) {\n        vars['--video-max-height'] = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;\n      }\n      if (maxWidth !== undefined) {\n        vars['--video-max-width'] = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;\n      }\n      if (minHeight !== undefined) {\n        vars['--video-min-height'] = typeof minHeight === 'number' ? `${minHeight}px` : minHeight;\n      }\n      if (minWidth !== undefined) {\n        vars['--video-min-width'] = typeof minWidth === 'number' ? `${minWidth}px` : minWidth;\n      }\n      return vars;\n    }, [maxHeight, maxWidth, minHeight, minWidth]);\n\n    if (isLoading)\n      return (\n        <Skeleton\n          radius={cssVar.borderRadiusLG}\n          style={{\n            height,\n            maxHeight,\n            maxWidth,\n            minHeight,\n            minWidth,\n            width,\n          }}\n        />\n      );\n\n    return (\n      <Flexbox\n        height={height}\n        ref={ref}\n        width={width}\n        className={\n          styleProps(\n            [styles.root, variantStyles[variant], videoMarker],\n            clsx(className, classNames?.wrapper),\n          ).className\n        }\n        style={{\n          ...cssVariables,\n          ...style,\n          ...customStyles?.wrapper,\n        }}\n      >\n        {preview && !isPlaying && (\n          <Flexbox\n            align={'center'}\n            justify={'center'}\n            {...styleProps(styles.mask, clsx(maskHoverCls, classNames?.mask), customStyles?.mask)}\n          >\n            <ActionIcon color={'#fff'} icon={PlayIcon} variant={'filled'} />\n          </Flexbox>\n        )}\n        <video\n          autoPlay={autoPlay}\n          controls={showControls}\n          height={height}\n          preload={preload}\n          width={width}\n          {...styleProps(styles.video, classNames?.video, {\n            height: 'auto',\n            maxWidth: '100%',\n            ...customStyles?.video,\n          })}\n          onEnded={(e) => {\n            setIsPlaying(false);\n            onEnded?.(e);\n          }}\n          onMouseEnter={(e) => {\n            setShowControls(true);\n            onMouseEnter?.(e);\n          }}\n          onMouseLeave={(e) => {\n            setShowControls(false);\n            onMouseLeave?.(e);\n          }}\n          onPause={(e) => {\n            setIsPlaying(false);\n            onPause?.(e);\n          }}\n          onPlay={(e) => {\n            setIsPlaying(true);\n            onPlay?.(e);\n          }}\n          onPlaying={(e) => {\n            setIsPlaying(true);\n            onPlaying?.(e);\n          }}\n          {...rest}\n        >\n          <source src={src} />\n        </video>\n      </Flexbox>\n    );\n  },\n);\n\nVideo.displayName = 'Video';\n\nexport default Video;\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,gBAAgB;CACpB,YAAY,QAAQ;CACpB,QAAQ,OAAO;CACf,UAAU,QAAQ;AACpB;AAqCA,MAAM,QAAQ,MACX,EACC,KACA,UAAU,QACV,KACA,OACA,YACA,WACA,YAAY,QACZ,WAAW,QACX,WACA,UACA,SACA,SACA,QACA,WACA,OACA,QACA,cACA,QAAQ,cACR,cACA,UAAU,MACV,WACA,UAAU,UACV,UACA,GAAG,WACC;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CAGtD,MAAM,eAAe,cAAsC;EACzD,MAAM,OAA+B,CAAC;EACtC,IAAI,cAAc,KAAA,GAChB,KAAK,wBAAwB,OAAO,cAAc,WAAW,GAAG,UAAU,MAAM;EAElF,IAAI,aAAa,KAAA,GACf,KAAK,uBAAuB,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM;EAE/E,IAAI,cAAc,KAAA,GAChB,KAAK,wBAAwB,OAAO,cAAc,WAAW,GAAG,UAAU,MAAM;EAElF,IAAI,aAAa,KAAA,GACf,KAAK,uBAAuB,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM;EAE/E,OAAO;CACT,GAAG;EAAC;EAAW;EAAU;EAAW;CAAQ,CAAC;CAE7C,IAAI,WACF,OACE,oBAAC,UAAD;EACE,QAAQ,OAAO;EACf,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;EACF;CACD,CAAA;CAGL,OACE,qBAACA,mBAAD;EACU;EACH;EACE;EACP,WACE,WACE;GAAC,OAAO;GAAM,cAAc;GAAU;EAAW,GACjD,KAAK,WAAW,YAAY,OAAO,CACrC,CAAC,CAAC;EAEJ,OAAO;GACL,GAAG;GACH,GAAG;GACH,GAAG,cAAc;EACnB;EAdF,UAAA,CAgBG,WAAW,CAAC,aACX,oBAACA,mBAAD;GACE,OAAO;GACP,SAAS;GACT,GAAI,WAAW,OAAO,MAAM,KAAA,mBAAmB,YAAY,IAAI,GAAG,cAAc,IAAI;GAEpF,UAAA,oBAAC,YAAD;IAAY,OAAO;IAAQ,MAAM;IAAU,SAAS;GAAW,CAAA;EACxD,CAAA,GAEX,oBAAC,SAAD;GACY;GACV,UAAU;GACF;GACC;GACF;GACP,GAAI,WAAW,OAAO,OAAO,YAAY,OAAO;IAC9C,QAAQ;IACR,UAAU;IACV,GAAG,cAAc;GACnB,CAAC;GACD,UAAU,MAAM;IACd,aAAa,KAAK;IAClB,UAAU,CAAC;GACb;GACA,eAAe,MAAM;IACnB,gBAAgB,IAAI;IACpB,eAAe,CAAC;GAClB;GACA,eAAe,MAAM;IACnB,gBAAgB,KAAK;IACrB,eAAe,CAAC;GAClB;GACA,UAAU,MAAM;IACd,aAAa,KAAK;IAClB,UAAU,CAAC;GACb;GACA,SAAS,MAAM;IACb,aAAa,IAAI;IACjB,SAAS,CAAC;GACZ;GACA,YAAY,MAAM;IAChB,aAAa,IAAI;IACjB,YAAY,CAAC;GACf;GACA,GAAI;GAEJ,UAAA,oBAAC,UAAD,EAAa,IAAM,CAAA;EACd,CAAA,CACA;;AAEb,CACF;AAEA,MAAM,cAAc"}
+{"version":3,"file":"index.mjs","names":["VideoPreset"],"sources":["../../src/Video/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport Caption from './parts/Caption';\nimport CenterPlay from './parts/CenterPlay';\nimport Controls from './parts/Controls';\nimport Frame from './parts/Frame';\nimport LoadError from './parts/LoadError';\nimport Root from './parts/Root';\nimport SectionList from './parts/SectionList';\nimport Timeline from './parts/Timeline';\nimport type { VideoProps } from './type';\nimport VideoPreset from './Video';\n\nexport interface IVideo {\n  (props: VideoProps): ReactNode;\n  Caption: typeof Caption;\n  CenterPlay: typeof CenterPlay;\n  Controls: typeof Controls;\n  Frame: typeof Frame;\n  LoadError: typeof LoadError;\n  Root: typeof Root;\n  SectionList: typeof SectionList;\n  Timeline: typeof Timeline;\n}\n\nconst Video = VideoPreset as unknown as IVideo;\nVideo.Caption = Caption;\nVideo.CenterPlay = CenterPlay;\nVideo.Controls = Controls;\nVideo.Frame = Frame;\nVideo.LoadError = LoadError;\nVideo.Root = Root;\nVideo.SectionList = SectionList;\nVideo.Timeline = Timeline;\n\nexport default Video;\nexport type * from './type';\nexport { useVideo, useVideoPlayer, useVideoState } from './useVideo';\n"],"mappings":";;;;;;;;;;;AAyBA,MAAM,QAAQA;AACd,MAAM,UAAU;AAChB,MAAM,aAAa;AACnB,MAAM,WAAW;AACjB,MAAM,QAAQ;AACd,MAAM,YAAY;AAClB,MAAM,OAAO;AACb,MAAM,cAAc;AACpB,MAAM,WAAW"}

package/es/Video/parts/Caption.d.mts

@@ -0,0 +1,9 @@
+import { VideoCaptionProps } from "../type.mjs";
+//#region src/Video/parts/Caption.d.ts
+declare const Caption: {
+  ({ action, className, style }: VideoCaptionProps): import("react").JSX.Element | null;
+  displayName: string;
+};
+//#endregion
+export { Caption as default };
+//# sourceMappingURL=Caption.d.mts.map

package/es/Video/parts/Caption.mjs

@@ -0,0 +1,37 @@
+"use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { FrameContext } from "../context.mjs";
+import { markerColor, styles } from "../style.mjs";
+import { useVideo } from "../useVideo.mjs";
+import { use } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Video/parts/Caption.tsx
+const Caption = ({ action, className, style }) => {
+	const frame = use(FrameContext);
+	const markers = useVideo((state) => state.captions ? state.activeMarkers : void 0);
+	if (!markers || markers.length === 0) return null;
+	const raised = Boolean(frame?.overlay && frame.visible);
+	return /* @__PURE__ */ jsx("div", {
+		"data-raised": String(raised),
+		"data-video-caption": "",
+		...styleProps([styles.caption, raised && styles.captionRaised], className, style),
+		onClick: (event) => event.stopPropagation(),
+		onPointerDown: (event) => event.stopPropagation(),
+		children: markers.map((marker, index) => /* @__PURE__ */ jsxs("div", {
+			...styleProps(styles.captionItem),
+			children: [(marker.label !== void 0 || action) && /* @__PURE__ */ jsxs("div", {
+				...styleProps(styles.captionTitle),
+				children: [
+					/* @__PURE__ */ jsx("span", { ...styleProps(styles.dot, void 0, { background: markerColor(marker.color) }) }),
+					marker.label,
+					action?.(marker)
+				]
+			}), /* @__PURE__ */ jsx("div", { children: marker.content })]
+		}, marker.key ?? `${marker.time}-${index}`))
+	});
+};
+Caption.displayName = "VideoCaption";
+//#endregion
+export { Caption as default };
+
+//# sourceMappingURL=Caption.mjs.map

package/es/Video/parts/Caption.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Caption.mjs","names":[],"sources":["../../../src/Video/parts/Caption.tsx"],"sourcesContent":["'use client';\n\nimport { use } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { FrameContext } from '../context';\nimport { markerColor, styles } from '../style';\nimport type { VideoCaptionProps } from '../type';\nimport { useVideo } from '../useVideo';\n\nconst Caption = ({ action, className, style }: VideoCaptionProps) => {\n  const frame = use(FrameContext);\n  const markers = useVideo((state) => (state.captions ? state.activeMarkers : undefined));\n  if (!markers || markers.length === 0) return null;\n  const raised = Boolean(frame?.overlay && frame.visible);\n\n  return (\n    <div\n      data-raised={String(raised)}\n      data-video-caption=\"\"\n      {...styleProps([styles.caption, raised && styles.captionRaised], className, style)}\n      onClick={(event) => event.stopPropagation()}\n      onPointerDown={(event) => event.stopPropagation()}\n    >\n      {markers.map((marker, index) => (\n        <div key={marker.key ?? `${marker.time}-${index}`} {...styleProps(styles.captionItem)}>\n          {(marker.label !== undefined || action) && (\n            <div {...styleProps(styles.captionTitle)}>\n              <span\n                {...styleProps(styles.dot, undefined, { background: markerColor(marker.color) })}\n              />\n              {marker.label}\n              {action?.(marker)}\n            </div>\n          )}\n          <div>{marker.content}</div>\n        </div>\n      ))}\n    </div>\n  );\n};\n\nCaption.displayName = 'VideoCaption';\n\nexport default Caption;\n"],"mappings":";;;;;;;;AAWA,MAAM,WAAW,EAAE,QAAQ,WAAW,YAA+B;CACnE,MAAM,QAAQ,IAAI,YAAY;CAC9B,MAAM,UAAU,UAAU,UAAW,MAAM,WAAW,MAAM,gBAAgB,KAAA,CAAU;CACtF,IAAI,CAAC,WAAW,QAAQ,WAAW,GAAG,OAAO;CAC7C,MAAM,SAAS,QAAQ,OAAO,WAAW,MAAM,OAAO;CAEtD,OACE,oBAAC,OAAD;EACE,eAAa,OAAO,MAAM;EAC1B,sBAAmB;EACnB,GAAI,WAAW,CAAC,OAAO,SAAS,UAAU,OAAO,aAAa,GAAG,WAAW,KAAK;EACjF,UAAU,UAAU,MAAM,gBAAgB;EAC1C,gBAAgB,UAAU,MAAM,gBAAgB;EAE/C,UAAA,QAAQ,KAAK,QAAQ,UACpB,qBAAC,OAAD;GAAmD,GAAI,WAAW,OAAO,WAAW;GAApF,UAAA,EACI,OAAO,UAAU,KAAA,KAAa,WAC9B,qBAAC,OAAD;IAAK,GAAI,WAAW,OAAO,YAAY;IAAvC,UAAA;KACE,oBAAC,QAAD,EACE,GAAI,WAAW,OAAO,KAAK,KAAA,GAAW,EAAE,YAAY,YAAY,OAAO,KAAK,EAAE,CAAC,EAChF,CAAA;KACA,OAAO;KACP,SAAS,MAAM;IACb;GAEP,CAAA,GAAA,oBAAC,OAAD,EAAA,UAAM,OAAO,QAAa,CAAA,CACvB;EAXK,GAAA,OAAO,OAAO,GAAG,OAAO,KAAK,GAAG,OAWrC,CACN;CACE,CAAA;AAET;AAEA,QAAQ,cAAc"}

package/es/Video/parts/CenterPlay.d.mts

@@ -0,0 +1,8 @@
+//#region src/Video/parts/CenterPlay.d.ts
+declare const CenterPlay: {
+  (): import("react").JSX.Element | null;
+  displayName: string;
+};
+//#endregion
+export { CenterPlay as default };
+//# sourceMappingURL=CenterPlay.d.mts.map

package/es/Video/parts/CenterPlay.mjs

@@ -0,0 +1,34 @@
+"use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
+import { useVideoContext } from "../context.mjs";
+import { styles } from "../style.mjs";
+import { useVideo } from "../useVideo.mjs";
+import video_default from "../../i18n/resources/en/video.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Play } from "lucide-react";
+//#region src/Video/parts/CenterPlay.tsx
+const CenterPlay = () => {
+	const { store } = useVideoContext();
+	const { t } = useTranslation(video_default);
+	if (!useVideo((state) => state.paused && state.status === "ready" && state.time < .05)) return null;
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": t("video.play"),
+		type: "button",
+		...styleProps(styles.centerPlay),
+		onClick: (event) => {
+			event.stopPropagation();
+			store.play();
+		},
+		children: /* @__PURE__ */ jsx(Play, {
+			fill: "currentColor",
+			size: 24,
+			strokeWidth: 0
+		})
+	});
+};
+CenterPlay.displayName = "VideoCenterPlay";
+//#endregion
+export { CenterPlay as default };
+
+//# sourceMappingURL=CenterPlay.mjs.map

package/es/Video/parts/CenterPlay.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CenterPlay.mjs","names":["videoMessages"],"sources":["../../../src/Video/parts/CenterPlay.tsx"],"sourcesContent":["'use client';\n\nimport { Play } from 'lucide-react';\n\nimport videoMessages from '@/i18n/resources/en/video';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { useVideoContext } from '../context';\nimport { styles } from '../style';\nimport { useVideo } from '../useVideo';\n\nconst CenterPlay = () => {\n  const { store } = useVideoContext();\n  const { t } = useTranslation(videoMessages);\n  const show = useVideo((state) => state.paused && state.status === 'ready' && state.time < 0.05);\n  if (!show) return null;\n\n  return (\n    <button\n      aria-label={t('video.play')}\n      type=\"button\"\n      {...styleProps(styles.centerPlay)}\n      onClick={(event) => {\n        event.stopPropagation();\n        void store.play();\n      }}\n    >\n      <Play fill=\"currentColor\" size={24} strokeWidth={0} />\n    </button>\n  );\n};\n\nCenterPlay.displayName = 'VideoCenterPlay';\n\nexport default CenterPlay;\n"],"mappings":";;;;;;;;;;AAYA,MAAM,mBAAmB;CACvB,MAAM,EAAE,UAAU,gBAAgB;CAClC,MAAM,EAAE,MAAM,eAAeA,aAAa;CAE1C,IAAI,CADS,UAAU,UAAU,MAAM,UAAU,MAAM,WAAW,WAAW,MAAM,OAAO,GAClF,GAAG,OAAO;CAElB,OACE,oBAAC,UAAD;EACE,cAAY,EAAE,YAAY;EAC1B,MAAK;EACL,GAAI,WAAW,OAAO,UAAU;EAChC,UAAU,UAAU;GAClB,MAAM,gBAAgB;GACtB,MAAW,KAAK;EAClB;EAEA,UAAA,oBAAC,MAAD;GAAM,MAAK;GAAe,MAAM;GAAI,aAAa;EAAI,CAAA;CAC/C,CAAA;AAEZ;AAEA,WAAW,cAAc"}

package/es/Video/parts/Controls.d.mts

@@ -0,0 +1,9 @@
+import { VideoControlsProps } from "../type.mjs";
+//#region src/Video/parts/Controls.d.ts
+declare const Controls: {
+  ({ children, className, extra, frameStep, style }: VideoControlsProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { Controls as default };
+//# sourceMappingURL=Controls.d.mts.map