jaci-ui 0.1.0

package/dist/components/tree-view/tree-view.js

@@ -0,0 +1,340 @@
+"use client";
+import { cx } from "../../styled-system/css/cx.js";
+import { treeView } from "../../styled-system/recipes/tree-view.js";
+import { Children, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/tree-view/tree-view.tsx
+const TreeViewContext = createContext(null);
+const TreeParentContext = createContext(void 0);
+const TreeItemContext = createContext(null);
+function useTreeViewContext() {
+	const context = useContext(TreeViewContext);
+	if (!context) throw new Error("TreeView parts must be rendered inside TreeView.Root.");
+	return context;
+}
+function asSet(value, mode) {
+	if (mode === "multiple") return new Set(Array.isArray(value) ? value : value ? [value] : []);
+	return new Set(typeof value === "string" ? [value] : []);
+}
+const TreeViewRoot = forwardRef(function TreeViewRoot({ children, className, defaultExpanded = [], defaultSelected = null, disabled = false, expanded: controlledExpanded, loopFocus = true, onExpandedChange, onSelectedChange, selected: controlledSelected, selectionMode = "single", ...props }, ref) {
+	const [uncontrolledExpanded, setUncontrolledExpanded] = useState(() => new Set(defaultExpanded));
+	const [uncontrolledSelected, setUncontrolledSelected] = useState(() => asSet(defaultSelected, selectionMode));
+	const [activeId, setActiveId] = useState(null);
+	const [, setVersion] = useState(0);
+	const nodesRef = useRef(/* @__PURE__ */ new Map());
+	const orderRef = useRef(0);
+	const styles = treeView();
+	const expanded = useMemo(() => new Set(controlledExpanded ?? uncontrolledExpanded), [controlledExpanded, uncontrolledExpanded]);
+	const selected = useMemo(() => controlledSelected === void 0 ? uncontrolledSelected : asSet(controlledSelected, selectionMode), [
+		controlledSelected,
+		selectionMode,
+		uncontrolledSelected
+	]);
+	const nodes = Array.from(nodesRef.current.values()).sort((a, b) => a.order - b.order);
+	const registerNode = useCallback((node) => {
+		const registeredNode = {
+			...node,
+			order: orderRef.current++
+		};
+		nodesRef.current.set(node.id, registeredNode);
+		setVersion((current) => current + 1);
+		return () => {
+			if (nodesRef.current.get(node.id) === registeredNode) nodesRef.current.delete(node.id);
+			setVersion((current) => current + 1);
+		};
+	}, []);
+	const setNodeElement = useCallback((id, element) => {
+		const node = nodesRef.current.get(id);
+		if (node) node.element = element;
+	}, []);
+	const hasChildren = useCallback((id) => nodes.some((node) => node.parentId === id), [nodes]);
+	const isVisible = useCallback((id) => {
+		let current = nodes.find((node) => node.id === id);
+		while (current?.parentId) {
+			if (!expanded.has(current.parentId)) return false;
+			current = nodes.find((node) => node.id === current?.parentId);
+		}
+		return true;
+	}, [expanded, nodes]);
+	const getDepth = useCallback((id) => {
+		let depth = 1;
+		let current = nodes.find((node) => node.id === id);
+		while (current?.parentId) {
+			depth += 1;
+			current = nodes.find((node) => node.id === current?.parentId);
+		}
+		return depth;
+	}, [nodes]);
+	const getSiblings = useCallback((id) => {
+		const node = nodes.find((candidate) => candidate.id === id);
+		return nodes.filter((candidate) => candidate.parentId === node?.parentId);
+	}, [nodes]);
+	const toggleExpanded = useCallback((id) => {
+		if (disabled || !hasChildren(id)) return;
+		const next = new Set(expanded);
+		if (next.has(id)) next.delete(id);
+		else next.add(id);
+		if (controlledExpanded === void 0) setUncontrolledExpanded(next);
+		onExpandedChange?.(Array.from(next));
+	}, [
+		controlledExpanded,
+		disabled,
+		expanded,
+		hasChildren,
+		onExpandedChange
+	]);
+	const selectNode = useCallback((id) => {
+		const node = nodes.find((candidate) => candidate.id === id);
+		if (disabled || !node || node.disabled || !node.selectable || selectionMode === "none") return;
+		const next = new Set(selected);
+		if (selectionMode === "single") {
+			next.clear();
+			next.add(id);
+		} else if (next.has(id)) next.delete(id);
+		else next.add(id);
+		if (controlledSelected === void 0) setUncontrolledSelected(next);
+		onSelectedChange?.(selectionMode === "multiple" ? Array.from(next) : next.values().next().value ?? null);
+	}, [
+		controlledSelected,
+		disabled,
+		nodes,
+		onSelectedChange,
+		selected,
+		selectionMode
+	]);
+	const visibleNodes = nodes.filter((node) => isVisible(node.id));
+	const focusNode = useCallback((id) => {
+		const node = nodes.find((candidate) => candidate.id === id);
+		if (!node || node.disabled || !isVisible(id)) return;
+		setActiveId(id);
+		node.element?.focus();
+	}, [isVisible, nodes]);
+	const handleKeyDown = useCallback((id, event) => {
+		if (disabled) return;
+		const index = visibleNodes.findIndex((node) => node.id === id);
+		const node = nodes.find((candidate) => candidate.id === id);
+		if (!node) return;
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			let nextIndex = index + (event.key === "ArrowDown" ? 1 : -1);
+			if (loopFocus) nextIndex = (nextIndex + visibleNodes.length) % visibleNodes.length;
+			const nextNode = visibleNodes[nextIndex];
+			if (nextIndex >= 0 && nextIndex < visibleNodes.length && nextNode) focusNode(nextNode.id);
+		} else if (event.key === "Home" || event.key === "End") {
+			event.preventDefault();
+			focusNode((event.key === "Home" ? visibleNodes[0] : visibleNodes.at(-1))?.id ?? id);
+		} else if (event.key === "ArrowRight") {
+			event.preventDefault();
+			if (hasChildren(id) && !expanded.has(id)) toggleExpanded(id);
+			else if (hasChildren(id)) focusNode(nodes.find((candidate) => candidate.parentId === id)?.id ?? id);
+		} else if (event.key === "ArrowLeft") {
+			event.preventDefault();
+			if (hasChildren(id) && expanded.has(id)) toggleExpanded(id);
+			else if (node.parentId) focusNode(node.parentId);
+		} else if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			selectNode(id);
+		}
+	}, [
+		disabled,
+		expanded,
+		focusNode,
+		hasChildren,
+		loopFocus,
+		nodes,
+		selectNode,
+		toggleExpanded,
+		visibleNodes
+	]);
+	const context = useMemo(() => ({
+		disabled,
+		loopFocus,
+		selectionMode,
+		expanded,
+		selected,
+		nodes,
+		registerNode,
+		setNodeElement,
+		isVisible,
+		hasChildren,
+		getDepth,
+		getSiblings,
+		toggleExpanded,
+		selectNode,
+		focusNode,
+		handleKeyDown,
+		activeId,
+		setActiveId
+	}), [
+		activeId,
+		disabled,
+		expanded,
+		focusNode,
+		getDepth,
+		getSiblings,
+		handleKeyDown,
+		hasChildren,
+		isVisible,
+		loopFocus,
+		nodes,
+		registerNode,
+		selectNode,
+		selected,
+		selectionMode,
+		setNodeElement,
+		toggleExpanded
+	]);
+	return /* @__PURE__ */ jsx(TreeViewContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			ref,
+			"aria-multiselectable": selectionMode === "multiple" || void 0,
+			className: cx(styles.root, className),
+			"data-disabled": disabled || void 0,
+			"data-jaci-component": "tree-view",
+			"data-slot": "tree-view",
+			role: "tree",
+			children
+		})
+	});
+});
+const TreeViewItem = forwardRef(function TreeViewItem({ children, className, disabled = false, onClick, onFocus, onKeyDown, style, selectable = true, id, ...props }, ref) {
+	const context = useTreeViewContext();
+	const parentId = useContext(TreeParentContext);
+	const styles = treeView();
+	useEffect(() => context.registerNode({
+		id,
+		parentId,
+		disabled,
+		selectable,
+		order: 0,
+		element: null
+	}), [
+		context.registerNode,
+		disabled,
+		id,
+		parentId,
+		selectable
+	]);
+	const siblings = context.getSiblings(id);
+	const registeredNode = context.nodes.find((candidate) => candidate.id === id);
+	const selected = context.selected.has(id);
+	const visible = context.isVisible(id);
+	const siblingIndex = siblings.findIndex((candidate) => candidate.id === id);
+	const tabIndex = context.activeId === id || context.activeId === null && context.nodes[0]?.id === id ? 0 : -1;
+	const childNodes = Children.toArray(children);
+	const groupNodes = childNodes.filter((child) => isValidElement(child) && child.type === TreeViewGroup);
+	const rowNodes = childNodes.filter((child) => !(isValidElement(child) && child.type === TreeViewGroup));
+	return /* @__PURE__ */ jsx(TreeParentContext.Provider, {
+		value: id,
+		children: /* @__PURE__ */ jsx(TreeItemContext.Provider, {
+			value: id,
+			children: /* @__PURE__ */ jsxs("div", {
+				...props,
+				ref: (element) => {
+					context.setNodeElement(id, element);
+					if (typeof ref === "function") ref(element);
+					else if (ref) ref.current = element;
+				},
+				"aria-disabled": disabled || void 0,
+				"aria-expanded": context.hasChildren(id) ? context.expanded.has(id) : void 0,
+				"aria-level": registeredNode ? context.getDepth(id) : parentId ? 2 : 1,
+				"aria-posinset": siblingIndex >= 0 ? siblingIndex + 1 : 1,
+				"aria-setsize": siblings.length || 1,
+				"aria-selected": context.selectionMode === "none" ? void 0 : selected,
+				className: styles.itemWrapper,
+				"data-disabled": disabled || void 0,
+				"data-expanded": context.expanded.has(id) || void 0,
+				"data-jaci-component": "tree-view",
+				"data-selected": selected || void 0,
+				"data-slot": "tree-view-item",
+				onClick: (event) => {
+					event.stopPropagation();
+					onClick?.(event);
+					if (!event.defaultPrevented) context.selectNode(id);
+				},
+				onFocus: (event) => {
+					context.setActiveId(id);
+					onFocus?.(event);
+				},
+				onKeyDown: (event) => {
+					event.stopPropagation();
+					context.handleKeyDown(id, event);
+					onKeyDown?.(event);
+				},
+				role: "treeitem",
+				tabIndex: visible ? tabIndex : -1,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: cx(styles.item, className),
+					"data-disabled": disabled || void 0,
+					"data-expanded": context.expanded.has(id) || void 0,
+					"data-selected": selected || void 0,
+					"data-slot": "tree-view-item-row",
+					style,
+					children: rowNodes
+				}), groupNodes]
+			})
+		})
+	});
+});
+const TreeViewGroup = forwardRef(function TreeViewGroup({ children, className, style, ...props }, ref) {
+	const context = useTreeViewContext();
+	const parentId = useContext(TreeParentContext);
+	const styles = treeView();
+	const visible = parentId ? context.expanded.has(parentId) : true;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		"aria-hidden": !visible || void 0,
+		className: cx(styles.group, className),
+		"data-jaci-component": "tree-view",
+		"data-expanded": visible || void 0,
+		"data-slot": "tree-view-group",
+		hidden: !visible,
+		role: "group",
+		style: {
+			...style,
+			display: visible ? style?.display : "none"
+		},
+		children
+	});
+});
+const TreeViewToggle = forwardRef(function TreeViewToggle({ children, className, onClick, ...props }, ref) {
+	const context = useTreeViewContext();
+	const id = useContext(TreeItemContext);
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		ref,
+		"aria-expanded": id ? context.expanded.has(id) : void 0,
+		className: cx(treeView().toggle, className),
+		"data-slot": "tree-view-toggle",
+		onClick: (event) => {
+			event.stopPropagation();
+			onClick?.(event);
+			if (!event.defaultPrevented && id) context.toggleExpanded(id);
+		},
+		tabIndex: -1,
+		type: "button",
+		children: children ?? (id && context.expanded.has(id) ? "▾" : "▸")
+	});
+});
+const TreeViewLabel = forwardRef(function TreeViewLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		ref,
+		className: cx(treeView().label, className),
+		"data-slot": "tree-view-label"
+	});
+});
+const TreeView = {
+	Root: TreeViewRoot,
+	Item: TreeViewItem,
+	Group: TreeViewGroup,
+	Toggle: TreeViewToggle,
+	Label: TreeViewLabel
+};
+//#endregion
+export { TreeView, TreeViewGroup, TreeViewItem, TreeViewLabel, TreeViewRoot, TreeViewToggle };
+
+//# sourceMappingURL=tree-view.js.map

package/dist/components/tree-view/tree-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view.js","names":[],"sources":["../../../src/components/tree-view/tree-view.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Children, isValidElement } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { treeView } from \"../../styled-system/recipes\";\n\nexport type TreeViewSelectionMode = \"none\" | \"single\" | \"multiple\";\nexport type TreeViewSelection = string | readonly string[] | null;\n\ninterface TreeNodeRecord {\n  id: string;\n  parentId: string | undefined;\n  disabled: boolean;\n  selectable: boolean;\n  order: number;\n  element: HTMLDivElement | null;\n}\n\ninterface TreeViewContextValue {\n  disabled: boolean;\n  loopFocus: boolean;\n  selectionMode: TreeViewSelectionMode;\n  expanded: ReadonlySet<string>;\n  selected: ReadonlySet<string>;\n  nodes: readonly TreeNodeRecord[];\n  registerNode: (node: TreeNodeRecord) => () => void;\n  setNodeElement: (id: string, element: HTMLDivElement | null) => void;\n  isVisible: (id: string) => boolean;\n  hasChildren: (id: string) => boolean;\n  getDepth: (id: string) => number;\n  getSiblings: (id: string) => readonly TreeNodeRecord[];\n  toggleExpanded: (id: string) => void;\n  selectNode: (id: string) => void;\n  focusNode: (id: string) => void;\n  handleKeyDown: (id: string, event: KeyboardEvent<HTMLDivElement>) => void;\n  activeId: string | null;\n  setActiveId: (id: string) => void;\n}\n\nconst TreeViewContext = createContext<TreeViewContextValue | null>(null);\nconst TreeParentContext = createContext<string | undefined>(undefined);\nconst TreeItemContext = createContext<string | null>(null);\n\nfunction useTreeViewContext() {\n  const context = useContext(TreeViewContext);\n  if (!context) throw new Error(\"TreeView parts must be rendered inside TreeView.Root.\");\n  return context;\n}\n\nfunction asSet(value: string | readonly string[] | null | undefined, mode: TreeViewSelectionMode) {\n  if (mode === \"multiple\") return new Set(Array.isArray(value) ? value : value ? [value] : []);\n  return new Set(typeof value === \"string\" ? [value] : []);\n}\n\nexport interface TreeViewRootProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  expanded?: readonly string[];\n  defaultExpanded?: readonly string[];\n  onExpandedChange?: (expanded: string[]) => void;\n  selected?: TreeViewSelection;\n  defaultSelected?: TreeViewSelection;\n  onSelectedChange?: (selected: TreeViewSelection) => void;\n  selectionMode?: TreeViewSelectionMode;\n  loopFocus?: boolean;\n  disabled?: boolean;\n  children?: ReactNode;\n}\n\nexport const TreeViewRoot = forwardRef<HTMLDivElement, TreeViewRootProps>(function TreeViewRoot(\n  {\n    children,\n    className,\n    defaultExpanded = [],\n    defaultSelected = null,\n    disabled = false,\n    expanded: controlledExpanded,\n    loopFocus = true,\n    onExpandedChange,\n    onSelectedChange,\n    selected: controlledSelected,\n    selectionMode = \"single\",\n    ...props\n  },\n  ref,\n) {\n  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(() => new Set(defaultExpanded));\n  const [uncontrolledSelected, setUncontrolledSelected] = useState(() =>\n    asSet(defaultSelected, selectionMode),\n  );\n  const [activeId, setActiveId] = useState<string | null>(null);\n  const [, setVersion] = useState(0);\n  const nodesRef = useRef(new Map<string, TreeNodeRecord>());\n  const orderRef = useRef(0);\n  const styles = treeView();\n  const expanded = useMemo(\n    () => new Set(controlledExpanded ?? uncontrolledExpanded),\n    [controlledExpanded, uncontrolledExpanded],\n  );\n  const selected = useMemo(\n    () =>\n      controlledSelected === undefined\n        ? uncontrolledSelected\n        : asSet(controlledSelected, selectionMode),\n    [controlledSelected, selectionMode, uncontrolledSelected],\n  );\n  const nodes = Array.from(nodesRef.current.values()).sort((a, b) => a.order - b.order);\n\n  const registerNode = useCallback((node: TreeNodeRecord) => {\n    const registeredNode = { ...node, order: orderRef.current++ };\n    nodesRef.current.set(node.id, registeredNode);\n    setVersion((current) => current + 1);\n    return () => {\n      if (nodesRef.current.get(node.id) === registeredNode) nodesRef.current.delete(node.id);\n      setVersion((current) => current + 1);\n    };\n  }, []);\n\n  const setNodeElement = useCallback((id: string, element: HTMLDivElement | null) => {\n    const node = nodesRef.current.get(id);\n    if (node) node.element = element;\n  }, []);\n\n  const hasChildren = useCallback(\n    (id: string) => nodes.some((node) => node.parentId === id),\n    [nodes],\n  );\n  const isVisible = useCallback(\n    (id: string) => {\n      let current = nodes.find((node) => node.id === id);\n      while (current?.parentId) {\n        if (!expanded.has(current.parentId)) return false;\n        current = nodes.find((node) => node.id === current?.parentId);\n      }\n      return true;\n    },\n    [expanded, nodes],\n  );\n  const getDepth = useCallback(\n    (id: string) => {\n      let depth = 1;\n      let current = nodes.find((node) => node.id === id);\n      while (current?.parentId) {\n        depth += 1;\n        current = nodes.find((node) => node.id === current?.parentId);\n      }\n      return depth;\n    },\n    [nodes],\n  );\n  const getSiblings = useCallback(\n    (id: string) => {\n      const node = nodes.find((candidate) => candidate.id === id);\n      return nodes.filter((candidate) => candidate.parentId === node?.parentId);\n    },\n    [nodes],\n  );\n\n  const toggleExpanded = useCallback(\n    (id: string) => {\n      if (disabled || !hasChildren(id)) return;\n      const next = new Set(expanded);\n      if (next.has(id)) next.delete(id);\n      else next.add(id);\n      if (controlledExpanded === undefined) setUncontrolledExpanded(next);\n      onExpandedChange?.(Array.from(next));\n    },\n    [controlledExpanded, disabled, expanded, hasChildren, onExpandedChange],\n  );\n\n  const selectNode = useCallback(\n    (id: string) => {\n      const node = nodes.find((candidate) => candidate.id === id);\n      if (disabled || !node || node.disabled || !node.selectable || selectionMode === \"none\")\n        return;\n      const next = new Set(selected);\n      if (selectionMode === \"single\") {\n        next.clear();\n        next.add(id);\n      } else if (next.has(id)) next.delete(id);\n      else next.add(id);\n      if (controlledSelected === undefined) setUncontrolledSelected(next);\n      onSelectedChange?.(\n        selectionMode === \"multiple\" ? Array.from(next) : (next.values().next().value ?? null),\n      );\n    },\n    [controlledSelected, disabled, nodes, onSelectedChange, selected, selectionMode],\n  );\n\n  const visibleNodes = nodes.filter((node) => isVisible(node.id));\n  const focusNode = useCallback(\n    (id: string) => {\n      const node = nodes.find((candidate) => candidate.id === id);\n      if (!node || node.disabled || !isVisible(id)) return;\n      setActiveId(id);\n      node.element?.focus();\n    },\n    [isVisible, nodes],\n  );\n\n  const handleKeyDown = useCallback(\n    (id: string, event: KeyboardEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      const index = visibleNodes.findIndex((node) => node.id === id);\n      const node = nodes.find((candidate) => candidate.id === id);\n      if (!node) return;\n      if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n        event.preventDefault();\n        const direction = event.key === \"ArrowDown\" ? 1 : -1;\n        let nextIndex = index + direction;\n        if (loopFocus) nextIndex = (nextIndex + visibleNodes.length) % visibleNodes.length;\n        const nextNode = visibleNodes[nextIndex];\n        if (nextIndex >= 0 && nextIndex < visibleNodes.length && nextNode) focusNode(nextNode.id);\n      } else if (event.key === \"Home\" || event.key === \"End\") {\n        event.preventDefault();\n        focusNode((event.key === \"Home\" ? visibleNodes[0] : visibleNodes.at(-1))?.id ?? id);\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault();\n        if (hasChildren(id) && !expanded.has(id)) toggleExpanded(id);\n        else if (hasChildren(id))\n          focusNode(nodes.find((candidate) => candidate.parentId === id)?.id ?? id);\n      } else if (event.key === \"ArrowLeft\") {\n        event.preventDefault();\n        if (hasChildren(id) && expanded.has(id)) toggleExpanded(id);\n        else if (node.parentId) focusNode(node.parentId);\n      } else if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        selectNode(id);\n      }\n    },\n    [\n      disabled,\n      expanded,\n      focusNode,\n      hasChildren,\n      loopFocus,\n      nodes,\n      selectNode,\n      toggleExpanded,\n      visibleNodes,\n    ],\n  );\n\n  const context = useMemo<TreeViewContextValue>(\n    () => ({\n      disabled,\n      loopFocus,\n      selectionMode,\n      expanded,\n      selected,\n      nodes,\n      registerNode,\n      setNodeElement,\n      isVisible,\n      hasChildren,\n      getDepth,\n      getSiblings,\n      toggleExpanded,\n      selectNode,\n      focusNode,\n      handleKeyDown,\n      activeId,\n      setActiveId,\n    }),\n    [\n      activeId,\n      disabled,\n      expanded,\n      focusNode,\n      getDepth,\n      getSiblings,\n      handleKeyDown,\n      hasChildren,\n      isVisible,\n      loopFocus,\n      nodes,\n      registerNode,\n      selectNode,\n      selected,\n      selectionMode,\n      setNodeElement,\n      toggleExpanded,\n    ],\n  );\n\n  return (\n    <TreeViewContext.Provider value={context}>\n      <div\n        {...props}\n        ref={ref}\n        aria-multiselectable={selectionMode === \"multiple\" || undefined}\n        className={cx(styles.root, className)}\n        data-disabled={disabled || undefined}\n        data-jaci-component=\"tree-view\"\n        data-slot=\"tree-view\"\n        role=\"tree\"\n      >\n        {children}\n      </div>\n    </TreeViewContext.Provider>\n  );\n});\n\nexport interface TreeViewItemProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"id\"> {\n  id: string;\n  disabled?: boolean;\n  selectable?: boolean;\n}\n\nexport const TreeViewItem = forwardRef<HTMLDivElement, TreeViewItemProps>(function TreeViewItem(\n  {\n    children,\n    className,\n    disabled = false,\n    onClick,\n    onFocus,\n    onKeyDown,\n    style,\n    selectable = true,\n    id,\n    ...props\n  },\n  ref,\n) {\n  const context = useTreeViewContext();\n  const parentId = useContext(TreeParentContext);\n  const styles = treeView();\n  useEffect(\n    () => context.registerNode({ id, parentId, disabled, selectable, order: 0, element: null }),\n    [context.registerNode, disabled, id, parentId, selectable],\n  );\n  const siblings = context.getSiblings(id);\n  const registeredNode = context.nodes.find((candidate) => candidate.id === id);\n  const selected = context.selected.has(id);\n  const visible = context.isVisible(id);\n  const siblingIndex = siblings.findIndex((candidate) => candidate.id === id);\n  const tabIndex =\n    context.activeId === id || (context.activeId === null && context.nodes[0]?.id === id) ? 0 : -1;\n  const childNodes = Children.toArray(children);\n  const groupNodes = childNodes.filter(\n    (child) => isValidElement(child) && child.type === TreeViewGroup,\n  );\n  const rowNodes = childNodes.filter(\n    (child) => !(isValidElement(child) && child.type === TreeViewGroup),\n  );\n\n  return (\n    <TreeParentContext.Provider value={id}>\n      <TreeItemContext.Provider value={id}>\n        <div\n          {...props}\n          ref={(element) => {\n            context.setNodeElement(id, element);\n            if (typeof ref === \"function\") ref(element);\n            else if (ref) ref.current = element;\n          }}\n          aria-disabled={disabled || undefined}\n          aria-expanded={context.hasChildren(id) ? context.expanded.has(id) : undefined}\n          aria-level={registeredNode ? context.getDepth(id) : parentId ? 2 : 1}\n          aria-posinset={siblingIndex >= 0 ? siblingIndex + 1 : 1}\n          aria-setsize={siblings.length || 1}\n          aria-selected={context.selectionMode === \"none\" ? undefined : selected}\n          className={styles.itemWrapper}\n          data-disabled={disabled || undefined}\n          data-expanded={context.expanded.has(id) || undefined}\n          data-jaci-component=\"tree-view\"\n          data-selected={selected || undefined}\n          data-slot=\"tree-view-item\"\n          onClick={(event) => {\n            event.stopPropagation();\n            onClick?.(event);\n            if (!event.defaultPrevented) context.selectNode(id);\n          }}\n          onFocus={(event) => {\n            context.setActiveId(id);\n            onFocus?.(event);\n          }}\n          onKeyDown={(event) => {\n            event.stopPropagation();\n            context.handleKeyDown(id, event);\n            onKeyDown?.(event);\n          }}\n          role=\"treeitem\"\n          tabIndex={visible ? tabIndex : -1}\n        >\n          <div\n            className={cx(styles.item, className)}\n            data-disabled={disabled || undefined}\n            data-expanded={context.expanded.has(id) || undefined}\n            data-selected={selected || undefined}\n            data-slot=\"tree-view-item-row\"\n            style={style}\n          >\n            {rowNodes}\n          </div>\n          {groupNodes}\n        </div>\n      </TreeItemContext.Provider>\n    </TreeParentContext.Provider>\n  );\n});\n\nexport type TreeViewGroupProps = ComponentPropsWithoutRef<\"div\">;\nexport const TreeViewGroup = forwardRef<HTMLDivElement, TreeViewGroupProps>(function TreeViewGroup(\n  { children, className, style, ...props },\n  ref,\n) {\n  const context = useTreeViewContext();\n  const parentId = useContext(TreeParentContext);\n  const styles = treeView();\n  const visible = parentId ? context.expanded.has(parentId) : true;\n  return (\n    // biome-ignore lint/a11y/useSemanticElements: WAI-ARIA tree groups require role=\"group\".\n    <div\n      {...props}\n      ref={ref}\n      aria-hidden={!visible || undefined}\n      className={cx(styles.group, className)}\n      data-jaci-component=\"tree-view\"\n      data-expanded={visible || undefined}\n      data-slot=\"tree-view-group\"\n      hidden={!visible}\n      role=\"group\"\n      style={{ ...style, display: visible ? style?.display : \"none\" }}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport type TreeViewToggleProps = ComponentPropsWithoutRef<\"button\">;\nexport const TreeViewToggle = forwardRef<HTMLButtonElement, TreeViewToggleProps>(\n  function TreeViewToggle({ children, className, onClick, ...props }, ref) {\n    const context = useTreeViewContext();\n    const itemId = useContext(TreeItemContext);\n    const id = itemId;\n    return (\n      <button\n        {...props}\n        ref={ref}\n        aria-expanded={id ? context.expanded.has(id) : undefined}\n        className={cx(treeView().toggle, className)}\n        data-slot=\"tree-view-toggle\"\n        onClick={(event) => {\n          event.stopPropagation();\n          onClick?.(event);\n          if (!event.defaultPrevented && id) context.toggleExpanded(id);\n        }}\n        tabIndex={-1}\n        type=\"button\"\n      >\n        {children ?? (id && context.expanded.has(id) ? \"▾\" : \"▸\")}\n      </button>\n    );\n  },\n);\n\nexport type TreeViewLabelProps = ComponentPropsWithoutRef<\"span\">;\nexport const TreeViewLabel = forwardRef<HTMLSpanElement, TreeViewLabelProps>(function TreeViewLabel(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <span\n      {...props}\n      ref={ref}\n      className={cx(treeView().label, className)}\n      data-slot=\"tree-view-label\"\n    />\n  );\n});\n\nexport const TreeView = {\n  Root: TreeViewRoot,\n  Item: TreeViewItem,\n  Group: TreeViewGroup,\n  Toggle: TreeViewToggle,\n  Label: TreeViewLabel,\n};\n"],"mappings":"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"}

package/dist/components/typography/heading.cjs

@@ -0,0 +1,28 @@
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_heading = require("../../styled-system/recipes/heading.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/typography/heading.tsx
+const defaultSizeByElement = {
+	h1: "2xl",
+	h2: "xl",
+	h3: "lg",
+	h4: "md",
+	h5: "sm",
+	h6: "xs"
+};
+const Heading = (0, react.forwardRef)(function Heading({ as = "h2", className, size, ...props }, ref) {
+	const Component = as;
+	const resolvedSize = size ?? defaultSizeByElement[as];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		...props,
+		ref,
+		className: require_cx.cx(require_heading.heading({ size: resolvedSize }), className),
+		"data-jaci-component": "heading",
+		"data-slot": "heading"
+	});
+});
+//#endregion
+exports.Heading = Heading;
+
+//# sourceMappingURL=heading.cjs.map

package/dist/components/typography/heading.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.cjs","names":["cx","heading"],"sources":["../../../src/components/typography/heading.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementType, ReactElement, Ref } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { heading } from \"../../styled-system/recipes\";\n\nexport type HeadingSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\nexport type HeadingElement = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\nconst defaultSizeByElement: Record<HeadingElement, HeadingSize> = {\n  h1: \"2xl\",\n  h2: \"xl\",\n  h3: \"lg\",\n  h4: \"md\",\n  h5: \"sm\",\n  h6: \"xs\",\n};\n\nexport interface HeadingProps extends Omit<ComponentPropsWithoutRef<\"h2\">, \"color\"> {\n  as?: HeadingElement;\n  size?: HeadingSize;\n}\n\nexport const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(function Heading(\n  { as = \"h2\", className, size, ...props },\n  ref,\n) {\n  const Component = as as ElementType;\n  const resolvedSize = size ?? defaultSizeByElement[as];\n\n  return (\n    <Component\n      {...props}\n      ref={ref as Ref<HTMLElement>}\n      className={cx(heading({ size: resolvedSize }), className)}\n      data-jaci-component=\"heading\"\n      data-slot=\"heading\"\n    />\n  ) as ReactElement;\n});\n"],"mappings":";;;;;AASA,MAAM,uBAA4D;CAChE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAOA,MAAa,WAAA,GAAA,MAAA,WAAA,CAAuD,SAAS,QAC3E,EAAE,KAAK,MAAM,WAAW,MAAM,GAAG,SACjC,KACA;CACA,MAAM,YAAY;CAClB,MAAM,eAAe,QAAQ,qBAAqB;CAElD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACE,GAAI;EACC;EACL,WAAWA,WAAAA,GAAGC,gBAAAA,QAAQ,EAAE,MAAM,aAAa,CAAC,GAAG,SAAS;EACxD,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC"}

package/dist/components/typography/heading.d.cts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef } from "react";
+//#region src/components/typography/heading.d.ts
+type HeadingSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+type HeadingElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+interface HeadingProps extends Omit<ComponentPropsWithoutRef<"h2">, "color"> {
+  as?: HeadingElement;
+  size?: HeadingSize;
+}
+declare const Heading: import("react").ForwardRefExoticComponent<HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
+//#endregion
+export { Heading, HeadingElement, HeadingProps, HeadingSize };
+//# sourceMappingURL=heading.d.cts.map

package/dist/components/typography/heading.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef } from "react";
+//#region src/components/typography/heading.d.ts
+type HeadingSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+type HeadingElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+interface HeadingProps extends Omit<ComponentPropsWithoutRef<"h2">, "color"> {
+  as?: HeadingElement;
+  size?: HeadingSize;
+}
+declare const Heading: import("react").ForwardRefExoticComponent<HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
+//#endregion
+export { Heading, HeadingElement, HeadingProps, HeadingSize };
+//# sourceMappingURL=heading.d.ts.map

package/dist/components/typography/heading.js

@@ -0,0 +1,28 @@
+import { cx } from "../../styled-system/css/cx.js";
+import { heading } from "../../styled-system/recipes/heading.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/typography/heading.tsx
+const defaultSizeByElement = {
+	h1: "2xl",
+	h2: "xl",
+	h3: "lg",
+	h4: "md",
+	h5: "sm",
+	h6: "xs"
+};
+const Heading = forwardRef(function Heading({ as = "h2", className, size, ...props }, ref) {
+	const Component = as;
+	const resolvedSize = size ?? defaultSizeByElement[as];
+	return /* @__PURE__ */ jsx(Component, {
+		...props,
+		ref,
+		className: cx(heading({ size: resolvedSize }), className),
+		"data-jaci-component": "heading",
+		"data-slot": "heading"
+	});
+});
+//#endregion
+export { Heading };
+
+//# sourceMappingURL=heading.js.map

package/dist/components/typography/heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.js","names":[],"sources":["../../../src/components/typography/heading.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementType, ReactElement, Ref } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { heading } from \"../../styled-system/recipes\";\n\nexport type HeadingSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\nexport type HeadingElement = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\nconst defaultSizeByElement: Record<HeadingElement, HeadingSize> = {\n  h1: \"2xl\",\n  h2: \"xl\",\n  h3: \"lg\",\n  h4: \"md\",\n  h5: \"sm\",\n  h6: \"xs\",\n};\n\nexport interface HeadingProps extends Omit<ComponentPropsWithoutRef<\"h2\">, \"color\"> {\n  as?: HeadingElement;\n  size?: HeadingSize;\n}\n\nexport const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(function Heading(\n  { as = \"h2\", className, size, ...props },\n  ref,\n) {\n  const Component = as as ElementType;\n  const resolvedSize = size ?? defaultSizeByElement[as];\n\n  return (\n    <Component\n      {...props}\n      ref={ref as Ref<HTMLElement>}\n      className={cx(heading({ size: resolvedSize }), className)}\n      data-jaci-component=\"heading\"\n      data-slot=\"heading\"\n    />\n  ) as ReactElement;\n});\n"],"mappings":";;;;;AASA,MAAM,uBAA4D;CAChE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAOA,MAAa,UAAU,WAA6C,SAAS,QAC3E,EAAE,KAAK,MAAM,WAAW,MAAM,GAAG,SACjC,KACA;CACA,MAAM,YAAY;CAClB,MAAM,eAAe,QAAQ,qBAAqB;CAElD,OACE,oBAAC,WAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,QAAQ,EAAE,MAAM,aAAa,CAAC,GAAG,SAAS;EACxD,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC"}

package/dist/components/typography/index.d.cts

@@ -0,0 +1,5 @@
+import { Heading, HeadingElement, HeadingProps, HeadingSize } from "./heading.cjs";
+import { Link, LinkProps } from "./link.cjs";
+import { Paragraph, ParagraphProps } from "./paragraph.cjs";
+import { Text, TextElement, TextProps, TextSize, TextTone } from "./text.cjs";
+export { Heading, type HeadingElement, type HeadingProps, type HeadingSize, Link, type LinkProps, Paragraph, type ParagraphProps, Text, type TextElement, type TextProps, type TextSize, type TextTone };

package/dist/components/typography/index.d.ts

@@ -0,0 +1,5 @@
+import { Heading, HeadingElement, HeadingProps, HeadingSize } from "./heading.js";
+import { Link, LinkProps } from "./link.js";
+import { Paragraph, ParagraphProps } from "./paragraph.js";
+import { Text, TextElement, TextProps, TextSize, TextTone } from "./text.js";
+export { Heading, type HeadingElement, type HeadingProps, type HeadingSize, Link, type LinkProps, Paragraph, type ParagraphProps, Text, type TextElement, type TextProps, type TextSize, type TextTone };

package/dist/components/typography/link.cjs

@@ -0,0 +1,18 @@
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_link = require("../../styled-system/recipes/link.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/typography/link.tsx
+const Link = (0, react.forwardRef)(function Link({ className, subtle = true, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		...props,
+		ref,
+		className: require_cx.cx(require_link.link({ subtle }), className),
+		"data-jaci-component": "link",
+		"data-slot": "link"
+	});
+});
+//#endregion
+exports.Link = Link;
+
+//# sourceMappingURL=link.cjs.map

package/dist/components/typography/link.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.cjs","names":["cx","link"],"sources":["../../../src/components/typography/link.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { link } from \"../../styled-system/recipes\";\n\nexport interface LinkProps extends ComponentPropsWithoutRef<\"a\"> {\n  subtle?: boolean;\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  { className, subtle = true, ...props },\n  ref,\n) {\n  return (\n    <a\n      {...props}\n      ref={ref}\n      className={cx(link({ subtle }), className)}\n      data-jaci-component=\"link\"\n      data-slot=\"link\"\n    />\n  );\n});\n"],"mappings":";;;;;AAUA,MAAa,QAAA,GAAA,MAAA,WAAA,CAAgD,SAAS,KACpE,EAAE,WAAW,SAAS,MAAM,GAAG,SAC/B,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;EACE,GAAI;EACC;EACL,WAAWA,WAAAA,GAAGC,aAAAA,KAAK,EAAE,OAAO,CAAC,GAAG,SAAS;EACzC,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC"}

package/dist/components/typography/link.d.cts

@@ -0,0 +1,9 @@
+import { ComponentPropsWithoutRef } from "react";
+//#region src/components/typography/link.d.ts
+interface LinkProps extends ComponentPropsWithoutRef<"a"> {
+  subtle?: boolean;
+}
+declare const Link: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+//#endregion
+export { Link, LinkProps };
+//# sourceMappingURL=link.d.cts.map

package/dist/components/typography/link.d.ts

@@ -0,0 +1,9 @@
+import { ComponentPropsWithoutRef } from "react";
+//#region src/components/typography/link.d.ts
+interface LinkProps extends ComponentPropsWithoutRef<"a"> {
+  subtle?: boolean;
+}
+declare const Link: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+//#endregion
+export { Link, LinkProps };
+//# sourceMappingURL=link.d.ts.map

package/dist/components/typography/link.js

@@ -0,0 +1,18 @@
+import { cx } from "../../styled-system/css/cx.js";
+import { link } from "../../styled-system/recipes/link.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/typography/link.tsx
+const Link = forwardRef(function Link({ className, subtle = true, ...props }, ref) {
+	return /* @__PURE__ */ jsx("a", {
+		...props,
+		ref,
+		className: cx(link({ subtle }), className),
+		"data-jaci-component": "link",
+		"data-slot": "link"
+	});
+});
+//#endregion
+export { Link };
+
+//# sourceMappingURL=link.js.map

package/dist/components/typography/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","names":[],"sources":["../../../src/components/typography/link.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { link } from \"../../styled-system/recipes\";\n\nexport interface LinkProps extends ComponentPropsWithoutRef<\"a\"> {\n  subtle?: boolean;\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  { className, subtle = true, ...props },\n  ref,\n) {\n  return (\n    <a\n      {...props}\n      ref={ref}\n      className={cx(link({ subtle }), className)}\n      data-jaci-component=\"link\"\n      data-slot=\"link\"\n    />\n  );\n});\n"],"mappings":";;;;;AAUA,MAAa,OAAO,WAAyC,SAAS,KACpE,EAAE,WAAW,SAAS,MAAM,GAAG,SAC/B,KACA;CACA,OACE,oBAAC,KAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,KAAK,EAAE,OAAO,CAAC,GAAG,SAAS;EACzC,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC"}

package/dist/components/typography/paragraph.cjs

@@ -0,0 +1,18 @@
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_paragraph = require("../../styled-system/recipes/paragraph.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/typography/paragraph.tsx
+const Paragraph = (0, react.forwardRef)(function Paragraph({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		...props,
+		ref,
+		className: require_cx.cx(require_paragraph.paragraph(), className),
+		"data-jaci-component": "paragraph",
+		"data-slot": "paragraph"
+	});
+});
+//#endregion
+exports.Paragraph = Paragraph;
+
+//# sourceMappingURL=paragraph.cjs.map

package/dist/components/typography/paragraph.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"paragraph.cjs","names":["cx","paragraph"],"sources":["../../../src/components/typography/paragraph.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { paragraph } from \"../../styled-system/recipes\";\n\nexport type ParagraphProps = ComponentPropsWithoutRef<\"p\">;\n\nexport const Paragraph = forwardRef<HTMLParagraphElement, ParagraphProps>(function Paragraph(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <p\n      {...props}\n      ref={ref}\n      className={cx(paragraph(), className)}\n      data-jaci-component=\"paragraph\"\n      data-slot=\"paragraph\"\n    />\n  );\n});\n"],"mappings":";;;;;AAQA,MAAa,aAAA,GAAA,MAAA,WAAA,CAA6D,SAAS,UACjF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;EACE,GAAI;EACC;EACL,WAAWA,WAAAA,GAAGC,kBAAAA,UAAU,GAAG,SAAS;EACpC,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC"}

package/dist/components/typography/paragraph.d.cts

@@ -0,0 +1,7 @@
+import { ComponentPropsWithoutRef } from "react";
+//#region src/components/typography/paragraph.d.ts
+type ParagraphProps = ComponentPropsWithoutRef<"p">;
+declare const Paragraph: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+//#endregion
+export { Paragraph, ParagraphProps };
+//# sourceMappingURL=paragraph.d.cts.map

package/dist/components/typography/paragraph.d.ts

@@ -0,0 +1,7 @@
+import { ComponentPropsWithoutRef } from "react";
+//#region src/components/typography/paragraph.d.ts
+type ParagraphProps = ComponentPropsWithoutRef<"p">;
+declare const Paragraph: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+//#endregion
+export { Paragraph, ParagraphProps };
+//# sourceMappingURL=paragraph.d.ts.map

package/dist/components/typography/paragraph.js

@@ -0,0 +1,18 @@
+import { cx } from "../../styled-system/css/cx.js";
+import { paragraph } from "../../styled-system/recipes/paragraph.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/typography/paragraph.tsx
+const Paragraph = forwardRef(function Paragraph({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("p", {
+		...props,
+		ref,
+		className: cx(paragraph(), className),
+		"data-jaci-component": "paragraph",
+		"data-slot": "paragraph"
+	});
+});
+//#endregion
+export { Paragraph };
+
+//# sourceMappingURL=paragraph.js.map

package/dist/components/typography/paragraph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"paragraph.js","names":[],"sources":["../../../src/components/typography/paragraph.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { paragraph } from \"../../styled-system/recipes\";\n\nexport type ParagraphProps = ComponentPropsWithoutRef<\"p\">;\n\nexport const Paragraph = forwardRef<HTMLParagraphElement, ParagraphProps>(function Paragraph(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <p\n      {...props}\n      ref={ref}\n      className={cx(paragraph(), className)}\n      data-jaci-component=\"paragraph\"\n      data-slot=\"paragraph\"\n    />\n  );\n});\n"],"mappings":";;;;;AAQA,MAAa,YAAY,WAAiD,SAAS,UACjF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,KAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,UAAU,GAAG,SAAS;EACpC,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC"}