@cck-ui/core 0.10.0 → 0.11.0

package/esm/components/splitter/splitter.mjs

@@ -0,0 +1,620 @@
+"use client";
+import export_helper_default from "../../_virtual/_/plugin-vue/export-helper.mjs";
+import { useComponentProps } from "../../core/config-provider/use-component-props/use-component-props.mjs";
+import { CBox } from "../../core/box/index.mjs";
+import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
+import splitter_module_default from "./splitter.module.mjs";
+import { varsResolver } from "./splitter.utils.mjs";
+import { provideSplitterContext } from "./splitter.context.mjs";
+import splitter_pane_default from "./splitter-pane/splitter-pane.mjs";
+import grip_icon_default from "./grip-icon.mjs";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, defineComponent, mergeProps, openBlock, ref, renderList, resolveDynamicComponent, useAttrs, useSlots, watch, watchEffect, withCtx } from "vue";
+import { useSplitter } from "@cck-ui/hooks";
+//#region packages/@cck-ui/core/src/components/splitter/splitter.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "CSplitter",
+	__name: "splitter",
+	props: {
+		orientation: {
+			type: String,
+			required: false
+		},
+		sizes: {
+			type: Array,
+			required: false
+		},
+		onSizeChange: {
+			type: Function,
+			required: false
+		},
+		onResizeStart: {
+			type: Function,
+			required: false
+		},
+		onResizeEnd: {
+			type: Function,
+			required: false
+		},
+		onCollapseChange: {
+			type: Function,
+			required: false
+		},
+		redistribute: {
+			type: [String, Function],
+			required: false
+		},
+		step: {
+			type: null,
+			required: false
+		},
+		shiftStep: {
+			type: null,
+			required: false
+		},
+		lineSize: {
+			type: [Number, String],
+			required: false
+		},
+		handleColor: {
+			type: null,
+			required: false
+		},
+		handleIcon: {
+			type: null,
+			required: false
+		},
+		withHandle: {
+			type: Boolean,
+			required: false
+		},
+		resetOnDoubleClick: {
+			type: Boolean,
+			required: false
+		},
+		className: {
+			type: String,
+			required: false
+		},
+		style: {
+			type: [
+				Object,
+				Function,
+				Array
+			],
+			required: false,
+			skipCheck: true
+		},
+		__vars: {
+			type: null,
+			required: false
+		},
+		__size: {
+			type: String,
+			required: false
+		},
+		hiddenFrom: {
+			type: null,
+			required: false
+		},
+		visibleFrom: {
+			type: null,
+			required: false
+		},
+		lightHidden: {
+			type: Boolean,
+			required: false
+		},
+		darkHidden: {
+			type: Boolean,
+			required: false
+		},
+		mod: {
+			type: [
+				Object,
+				String,
+				Array
+			],
+			required: false
+		},
+		m: {
+			type: null,
+			required: false
+		},
+		my: {
+			type: null,
+			required: false
+		},
+		mx: {
+			type: null,
+			required: false
+		},
+		mt: {
+			type: null,
+			required: false
+		},
+		mb: {
+			type: null,
+			required: false
+		},
+		ms: {
+			type: null,
+			required: false
+		},
+		me: {
+			type: null,
+			required: false
+		},
+		mis: {
+			type: null,
+			required: false
+		},
+		mie: {
+			type: null,
+			required: false
+		},
+		ml: {
+			type: null,
+			required: false
+		},
+		mr: {
+			type: null,
+			required: false
+		},
+		p: {
+			type: null,
+			required: false
+		},
+		py: {
+			type: null,
+			required: false
+		},
+		px: {
+			type: null,
+			required: false
+		},
+		pt: {
+			type: null,
+			required: false
+		},
+		pb: {
+			type: null,
+			required: false
+		},
+		ps: {
+			type: null,
+			required: false
+		},
+		pe: {
+			type: null,
+			required: false
+		},
+		pis: {
+			type: null,
+			required: false
+		},
+		pie: {
+			type: null,
+			required: false
+		},
+		pl: {
+			type: null,
+			required: false
+		},
+		pr: {
+			type: null,
+			required: false
+		},
+		bd: {
+			type: null,
+			required: false
+		},
+		bdrs: {
+			type: null,
+			required: false
+		},
+		bg: {
+			type: null,
+			required: false
+		},
+		c: {
+			type: null,
+			required: false
+		},
+		opacity: {
+			type: [
+				String,
+				Object,
+				Number
+			],
+			required: false
+		},
+		ff: {
+			type: [String, Object],
+			required: false
+		},
+		fz: {
+			type: null,
+			required: false
+		},
+		fw: {
+			type: null,
+			required: false
+		},
+		lts: {
+			type: null,
+			required: false
+		},
+		ta: {
+			type: [String, Object],
+			required: false
+		},
+		lh: {
+			type: null,
+			required: false
+		},
+		fs: {
+			type: null,
+			required: false
+		},
+		tt: {
+			type: [String, Object],
+			required: false
+		},
+		td: {
+			type: null,
+			required: false
+		},
+		w: {
+			type: null,
+			required: false
+		},
+		miw: {
+			type: null,
+			required: false
+		},
+		maw: {
+			type: null,
+			required: false
+		},
+		h: {
+			type: null,
+			required: false
+		},
+		mih: {
+			type: null,
+			required: false
+		},
+		mah: {
+			type: null,
+			required: false
+		},
+		bgsz: {
+			type: null,
+			required: false
+		},
+		bgp: {
+			type: null,
+			required: false
+		},
+		bgr: {
+			type: null,
+			required: false
+		},
+		bga: {
+			type: null,
+			required: false
+		},
+		pos: {
+			type: [String, Object],
+			required: false
+		},
+		top: {
+			type: null,
+			required: false
+		},
+		left: {
+			type: null,
+			required: false
+		},
+		bottom: {
+			type: null,
+			required: false
+		},
+		right: {
+			type: null,
+			required: false
+		},
+		inset: {
+			type: null,
+			required: false
+		},
+		display: {
+			type: null,
+			required: false
+		},
+		flex: {
+			type: null,
+			required: false
+		},
+		unstyled: {
+			type: Boolean,
+			required: false
+		},
+		variant: {
+			type: null,
+			required: false
+		},
+		classNames: {
+			type: null,
+			required: false
+		},
+		styles: {
+			type: null,
+			required: false
+		},
+		vars: {
+			type: Function,
+			required: false
+		},
+		attributes: {
+			type: null,
+			required: false
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const rootRef = ref(null);
+		const attrs = useAttrs();
+		const slots = useSlots();
+		const rawProps = __props;
+		const defaultProps = {
+			orientation: "horizontal",
+			lineSize: 2,
+			withHandle: true,
+			resetOnDoubleClick: true
+		};
+		const props = useComponentProps({
+			component: "CSplitter",
+			defaultProps,
+			props: rawProps
+		});
+		const knownProps = [
+			"classNames",
+			"className",
+			"style",
+			"styles",
+			"unstyled",
+			"vars",
+			"orientation",
+			"sizes",
+			"onSizeChange",
+			"onResizeStart",
+			"onResizeEnd",
+			"onCollapseChange",
+			"redistribute",
+			"step",
+			"shiftStep",
+			"lineSize",
+			"handleColor",
+			"handleIcon",
+			"withHandle",
+			"resetOnDoubleClick",
+			"mod",
+			"attributes"
+		];
+		const modList = computed(() => [{ orientation: props.value.orientation }]);
+		const getStyles = useStyles({
+			name: "Splitter",
+			classes: splitter_module_default,
+			props: {
+				...props.value,
+				...attrs
+			},
+			className: props.value.className,
+			style: props.value.style,
+			classNames: props.value.classNames,
+			styles: props.value.styles,
+			unstyled: props.value.unstyled,
+			attributes: props.value.attributes,
+			vars: props.value.vars,
+			varsResolver
+		});
+		const paneVNodes = ref([]);
+		const panels = ref([]);
+		watchEffect(() => {
+			const filtered = (slots.default?.() || []).filter((vnode) => vnode.type === splitter_pane_default);
+			paneVNodes.value = filtered;
+			panels.value = filtered.map((vnode) => {
+				const vProps = vnode.props || {};
+				return {
+					defaultSize: vProps.defaultSize ?? vProps["default-size"] ?? 0,
+					min: vProps.min ?? void 0,
+					max: vProps.max ?? void 0,
+					collapsible: vProps.collapsible ?? false,
+					collapseThreshold: vProps.collapseThreshold ?? vProps["collapse-threshold"] ?? void 0
+				};
+			});
+		});
+		const splitter = useSplitter({
+			panels: panels.value,
+			orientation: props.value.orientation,
+			sizes: props.value.sizes,
+			onSizeChange: props.value.onSizeChange,
+			onResizeStart: props.value.onResizeStart,
+			onResizeEnd: props.value.onResizeEnd,
+			onCollapseChange: props.value.onCollapseChange,
+			redistribute: props.value.redistribute,
+			step: props.value.step,
+			shiftStep: props.value.shiftStep,
+			resetOnDoubleClick: props.value.resetOnDoubleClick
+		});
+		watch(rootRef, (newVal) => {
+			if (newVal) {
+				const domEl = newVal.$el || newVal.root;
+				if (domEl instanceof HTMLElement) splitter.containerRef(domEl);
+			} else splitter.containerRef(null);
+		}, { immediate: true });
+		const getHandleAttrs = (index) => {
+			const handleProps = splitter.getHandleProps({ index });
+			const { ref: _ref, onDoubleClick, ...attrs } = handleProps;
+			return {
+				role: attrs.role,
+				"aria-orientation": attrs["aria-orientation"],
+				"aria-valuenow": handleProps["aria-valuenow"],
+				"aria-valuemin": handleProps["aria-valuemin"],
+				"aria-valuemax": handleProps["aria-valuemax"],
+				tabIndex: handleProps.tabIndex,
+				"data-active": handleProps["data-active"],
+				"data-orientation": handleProps["data-orientation"]
+			};
+		};
+		const isHandleActive = (index) => {
+			return splitter.activeHandle === index;
+		};
+		const handleAttrs = (index) => {
+			const styles = getStyles("handle");
+			const attrs = getHandleAttrs(index);
+			return {
+				...styles,
+				...attrs,
+				key: `handle-${index}`
+			};
+		};
+		const getPaneStyle = (index) => {
+			const size = splitter.sizes.value[index];
+			if (!splitter.pixelMode) return { flexBasis: `${typeof size === "number" ? size : parseFloat(size)}%` };
+			if (typeof size === "string" && (size.endsWith("px") || size.endsWith("rem"))) return {
+				flexGrow: 0,
+				flexShrink: 1,
+				flexBasis: size
+			};
+			return {
+				flexGrow: typeof size === "number" ? size : parseFloat(size),
+				flexShrink: 1,
+				flexBasis: 0
+			};
+		};
+		watch(() => props.value.sizes, (newSizes) => {
+			if (!newSizes) return;
+			const currentSizes = splitter.sizes.value;
+			if (JSON.stringify(newSizes) !== JSON.stringify(currentSizes)) splitter.setSizes(newSizes);
+		}, {
+			immediate: true,
+			deep: true
+		});
+		const collapsed = computed(() => splitter.collapsed);
+		const orientation = computed(() => props.value.orientation || "horizontal");
+		provideSplitterContext({
+			getStyles,
+			sizes: splitter.sizes,
+			collapsed,
+			orientation,
+			getPaneStyle
+		});
+		const defaultIcon = computed(() => props.value.orientation === "vertical" ? "horizontal" : "vertical");
+		const thumbIcon = computed(() => {
+			if (props.value.handleIcon !== void 0) return props.value.handleIcon;
+			return grip_icon_default;
+		});
+		const withHandle = computed(() => props.value.withHandle);
+		const handleDblClick = (index) => {
+			if (props.value.resetOnDoubleClick !== false) splitter.reset(index);
+		};
+		const rootAttrs = computed(() => getStyles("root"));
+		const mergedAttrs = computed(() => {
+			const others = {};
+			const propsValue = props.value;
+			for (const key in propsValue) if (!knownProps.includes(key)) others[key] = propsValue[key];
+			const userMod = props.value.mod;
+			const mergedMod = [...Array.isArray(userMod) ? userMod : [userMod].filter(Boolean), ...modList.value || []];
+			return {
+				...others,
+				mod: mergedMod,
+				...rootAttrs.value
+			};
+		});
+		__expose({
+			root: computed(() => rootRef.value?.root || null),
+			sizes: splitter.sizes,
+			collapsed: splitter.collapsed,
+			activeHandle: splitter.activeHandle,
+			setSizes: splitter.setSizes,
+			collapse: splitter.collapse,
+			expand: splitter.expand,
+			toggleCollapse: splitter.toggleCollapse,
+			reset: splitter.reset
+		});
+		const __returned__ = {
+			rootRef,
+			attrs,
+			slots,
+			rawProps,
+			defaultProps,
+			props,
+			knownProps,
+			modList,
+			getStyles,
+			paneVNodes,
+			panels,
+			splitter,
+			getHandleAttrs,
+			isHandleActive,
+			handleAttrs,
+			getPaneStyle,
+			collapsed,
+			orientation,
+			defaultIcon,
+			thumbIcon,
+			withHandle,
+			handleDblClick,
+			rootAttrs,
+			mergedAttrs,
+			get CBox() {
+				return CBox;
+			}
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createBlock($setup["CBox"], mergeProps({ ref: "rootRef" }, $setup.mergedAttrs), {
+		default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList($setup.paneVNodes, (vnode, index) => {
+			return openBlock(), createElementBlock(Fragment, { key: `pane-${index}` }, [index > 0 ? (openBlock(), createBlock($setup["CBox"], mergeProps({
+				key: 0,
+				ref_for: true
+			}, $setup.handleAttrs(index - 1), {
+				key: `handle-${index - 1}`,
+				onPointerdown: $setup.splitter.getHandleEventHandlers({ index: index - 1 }).onPointerDown,
+				onTouchstart: $setup.splitter.getHandleEventHandlers({ index: index - 1 }).onTouchStart,
+				onKeydown: $setup.splitter.getHandleEventHandlers({ index: index - 1 }).onKeyDown,
+				onDblclick: ($event) => $setup.handleDblClick(index - 1)
+			}), {
+				default: withCtx(() => [$setup.withHandle ? (openBlock(), createBlock($setup["CBox"], mergeProps({
+					key: 0,
+					ref_for: true
+				}, $setup.getStyles("thumb"), {
+					"data-orientation": $setup.orientation,
+					"data-active": $setup.isHandleActive(index - 1) || void 0
+				}), {
+					default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent($setup.thumbIcon), { orientation: $setup.defaultIcon }, null, 8, ["orientation"]))]),
+					_: 1
+				}, 16, ["data-orientation", "data-active"])) : createCommentVNode("v-if", true)]),
+				_: 2
+			}, 1040, [
+				"onPointerdown",
+				"onTouchstart",
+				"onKeydown",
+				"onDblclick"
+			])) : createCommentVNode("v-if", true), (openBlock(), createBlock(resolveDynamicComponent(vnode), { __index: index }, null, 8, ["__index"]))], 64);
+		}), 128))]),
+		_: 1
+	}, 16);
+}
+var splitter_default = /*#__PURE__*/ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/cck-ui/cck-ui/packages/@cck-ui/core/src/components/splitter/splitter.vue"]]);
+//#endregion
+export { splitter_default as default };
+
+//# sourceMappingURL=splitter.mjs.map

package/esm/components/splitter/splitter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"splitter.mjs","names":[],"sources":["../../../src/components/splitter/splitter.vue"],"sourcesContent":["<template>\n  <c-box ref=\"rootRef\" v-bind=\"mergedAttrs\">\n    <template v-for=\"(vnode, index) in paneVNodes\" :key=\"`pane-${index}`\">\n      <c-box\n        v-if=\"index > 0\"\n        v-bind=\"handleAttrs(index - 1)\"\n        :key=\"`handle-${index - 1}`\"\n        @pointerdown=\"splitter.getHandleEventHandlers({ index: index - 1 }).onPointerDown\"\n        @touchstart=\"splitter.getHandleEventHandlers({ index: index - 1 }).onTouchStart\"\n        @keydown=\"splitter.getHandleEventHandlers({ index: index - 1 }).onKeyDown\"\n        @dblclick=\"handleDblClick(index - 1)\"\n      >\n        <c-box\n          v-if=\"withHandle\"\n          v-bind=\"getStyles('thumb')\"\n          :data-orientation=\"orientation\"\n          :data-active=\"isHandleActive(index - 1) || undefined\"\n        >\n          <component :is=\"thumbIcon\" :orientation=\"defaultIcon\" />\n        </c-box>\n      </c-box>\n\n      <component :is=\"vnode\" :__index=\"index\" />\n    </template>\n  </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs, useSlots, watch, watchEffect } from 'vue'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport { SplitterFactory, type SplitterProps } from './splitter.types'\nimport classes from './splitter.module.css'\nimport { varsResolver } from './splitter.utils'\nimport SplitterPane from './splitter-pane/splitter-pane.vue'\nimport { useSplitter, UseSplitterPanel } from '@cck-ui/hooks'\nimport { provideSplitterContext } from './splitter.context'\nimport GripIcon from './grip-icon.vue'\n\ndefineOptions({\n  name: 'CSplitter',\n})\n\nconst rootRef = ref<InstanceType<typeof CBox> | null>(null)\n\nconst attrs = useAttrs()\nconst slots = useSlots()\n\nconst rawProps = defineProps<SplitterProps>()\n\nconst defaultProps = {\n  orientation: 'horizontal',\n  lineSize: 2,\n  withHandle: true,\n  resetOnDoubleClick: true,\n} satisfies Partial<SplitterProps>\n\nconst props = useComponentProps({\n  component: 'CSplitter',\n  defaultProps,\n  props: rawProps,\n})\n\nconst knownProps = [\n  'classNames',\n  'className',\n  'style',\n  'styles',\n  'unstyled',\n  'vars',\n  'orientation',\n  'sizes',\n  'onSizeChange',\n  'onResizeStart',\n  'onResizeEnd',\n  'onCollapseChange',\n  'redistribute',\n  'step',\n  'shiftStep',\n  'lineSize',\n  'handleColor',\n  'handleIcon',\n  'withHandle',\n  'resetOnDoubleClick',\n  'mod',\n  'attributes',\n]\n\nconst modList = computed(() => [\n  {\n    orientation: props.value.orientation,\n  },\n])\n\nconst getStyles = useStyles<SplitterFactory>({\n  name: 'Splitter',\n  classes,\n  props: { ...props.value, ...attrs } as SplitterProps,\n  className: props.value.className,\n  style: props.value.style,\n  classNames: props.value.classNames,\n  styles: props.value.styles,\n  unstyled: props.value.unstyled,\n  attributes: props.value.attributes,\n  vars: props.value.vars,\n  varsResolver,\n})\n\nconst paneVNodes = ref<any[]>([])\nconst panels = ref<UseSplitterPanel[]>([])\n\nwatchEffect(() => {\n  const defaultSlots = slots.default?.() || []\n  const filtered = defaultSlots.filter((vnode) => vnode.type === SplitterPane)\n  paneVNodes.value = filtered\n  panels.value = filtered.map((vnode) => {\n    const vProps = vnode.props || {}\n    return {\n      defaultSize: vProps.defaultSize ?? vProps['default-size'] ?? 0,\n      min: vProps.min ?? undefined,\n      max: vProps.max ?? undefined,\n      collapsible: vProps.collapsible ?? false,\n      collapseThreshold: vProps.collapseThreshold ?? vProps['collapse-threshold'] ?? undefined,\n    }\n  })\n})\n\nconst splitter = useSplitter({\n  panels: panels.value,\n  orientation: props.value.orientation,\n  sizes: props.value.sizes,\n  onSizeChange: props.value.onSizeChange,\n  onResizeStart: props.value.onResizeStart,\n  onResizeEnd: props.value.onResizeEnd,\n  onCollapseChange: props.value.onCollapseChange,\n  redistribute: props.value.redistribute,\n  step: props.value.step,\n  shiftStep: props.value.shiftStep,\n  resetOnDoubleClick: props.value.resetOnDoubleClick,\n})\n\nwatch(\n  rootRef,\n  (newVal) => {\n    if (newVal) {\n      const domEl = newVal.$el || newVal.root\n      if (domEl instanceof HTMLElement) {\n        splitter.containerRef(domEl)\n      }\n    } else {\n      splitter.containerRef(null)\n    }\n  },\n  { immediate: true }\n)\n\nconst getHandleAttrs = (index: number) => {\n  const handleProps = splitter.getHandleProps({ index })\n  const { ref: _ref, onDoubleClick, ...attrs } = handleProps\n  return {\n    role: attrs.role,\n    'aria-orientation': attrs['aria-orientation'],\n    'aria-valuenow': handleProps['aria-valuenow'],\n    'aria-valuemin': handleProps['aria-valuemin'],\n    'aria-valuemax': handleProps['aria-valuemax'],\n    tabIndex: handleProps.tabIndex,\n    'data-active': handleProps['data-active'],\n    'data-orientation': handleProps['data-orientation'],\n  }\n}\n\nconst isHandleActive = (index: number) => {\n  return splitter.activeHandle === index\n}\n\nconst handleAttrs = (index: number) => {\n  const styles = getStyles('handle')\n  const attrs = getHandleAttrs(index)\n  return {\n    ...styles,\n    ...attrs,\n    key: `handle-${index}`,\n  }\n}\n\nconst getPaneStyle = (index: number) => {\n  const sizes = splitter.sizes.value\n  const size = sizes[index]\n  const pixelMode = splitter.pixelMode\n  if (!pixelMode) {\n    const magnitude = typeof size === 'number' ? size : parseFloat(size as string)\n    return { flexBasis: `${magnitude}%` }\n  }\n  const isFixed = typeof size === 'string' && (size.endsWith('px') || size.endsWith('rem'))\n  if (isFixed) {\n    return { flexGrow: 0, flexShrink: 1, flexBasis: size as string }\n  }\n  const magnitude = typeof size === 'number' ? size : parseFloat(size as string)\n  return { flexGrow: magnitude, flexShrink: 1, flexBasis: 0 }\n}\n\nwatch(\n  () => props.value.sizes,\n  (newSizes) => {\n    if (!newSizes) {\n      return\n    }\n    const currentSizes = splitter.sizes.value\n    if (JSON.stringify(newSizes) !== JSON.stringify(currentSizes)) {\n      splitter.setSizes(newSizes)\n    }\n  },\n  { immediate: true, deep: true }\n)\n\nconst collapsed = computed(() => splitter.collapsed)\nconst orientation = computed(() => props.value.orientation || 'horizontal')\n\nprovideSplitterContext({\n  getStyles,\n  sizes: splitter.sizes,\n  collapsed,\n  orientation,\n  getPaneStyle,\n})\n\nconst defaultIcon = computed(() =>\n  props.value.orientation === 'vertical' ? 'horizontal' : 'vertical'\n)\n\nconst thumbIcon = computed(() => {\n  if (props.value.handleIcon !== undefined) {\n    return props.value.handleIcon\n  }\n  return GripIcon\n})\n\nconst withHandle = computed(() => props.value.withHandle)\n\nconst handleDblClick = (index: number) => {\n  if (props.value.resetOnDoubleClick !== false) {\n    splitter.reset(index)\n  }\n}\n\nconst rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = computed(() => {\n  const others: Record<string, any> = {}\n  const propsValue = props.value\n  for (const key in propsValue) {\n    if (!knownProps.includes(key)) {\n      others[key] = propsValue[key as keyof typeof propsValue]\n    }\n  }\n  const userMod = props.value.mod\n  const mergedMod = [\n    ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n    ...(modList.value || []),\n  ]\n  return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n  root: computed(() => rootRef.value?.root || null),\n  sizes: splitter.sizes,\n  collapsed: splitter.collapsed,\n  activeHandle: splitter.activeHandle,\n  setSizes: splitter.setSizes,\n  collapse: splitter.collapse,\n  expand: splitter.expand,\n  toggleCollapse: splitter.toggleCollapse,\n  reset: splitter.reset,\n})\n</script>\n"],"mappings":"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"}

package/esm/components/splitter/splitter.module.mjs

@@ -0,0 +1,12 @@
+"use client";
+//#region packages/@cck-ui/core/src/components/splitter/splitter.module.css
+var splitter_module_default = {
+	"root": "m_ea473028",
+	"pane": "m_ea4612ae",
+	"handle": "m_636563ee",
+	"thumb": "m_5eb7eb50"
+};
+//#endregion
+export { splitter_module_default as default };
+
+//# sourceMappingURL=splitter.module.mjs.map

package/esm/components/splitter/splitter.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"splitter.module.mjs","names":[],"sources":["../../../src/components/splitter/splitter.module.css"],"sourcesContent":[".root {\n  display: flex;\n\n  &:where([data-orientation='horizontal']) {\n    flex-direction: row;\n  }\n\n  &:where([data-orientation='vertical']) {\n    flex-direction: column;\n  }\n}\n\n.pane {\n  flex-grow: 0;\n  flex-shrink: 1;\n  overflow: auto;\n}\n\n.handle {\n  flex: 0 0 var(--splitter-line-size, rem(2px));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  touch-action: none;\n  outline: none;\n  background-color: var(--splitter-handle-color, var(--c-color-body));\n\n  &:where([data-orientation='horizontal']) {\n    cursor: col-resize;\n  }\n\n  &:where([data-orientation='vertical']) {\n    cursor: row-resize;\n  }\n}\n\n.thumb {\n  position: absolute;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 1000px;\n  color: var(--c-color-dimmed);\n  transition: color 100ms ease;\n\n  @mixin where-light {\n    background-color: var(--c-color-white);\n    border: rem(1px) solid var(--c-color-gray-3);\n  }\n\n  @mixin where-dark {\n    background-color: var(--c-color-dark-6);\n    border: rem(1px) solid var(--c-color-dark-4);\n  }\n\n  &:where([data-orientation='horizontal']) {\n    width: rem(12px);\n    height: rem(60px);\n  }\n\n  &:where([data-orientation='vertical']) {\n    width: rem(60px);\n    height: rem(12px);\n  }\n\n  & > svg {\n    width: 100%;\n    height: 100%;\n  }\n\n  .handle:focus-visible & {\n    box-shadow: 0 0 0 rem(2px) var(--c-primary-color-filled);\n  }\n}\n"],"mappings":";;AAAA,IAAA,0BAAe;CAAC,QAAO;CAAa,QAAO;CAAa,UAAS;CAAa,SAAQ;AAAY"}

package/esm/components/splitter/splitter.utils.mjs

@@ -0,0 +1,13 @@
+"use client";
+import { rem } from "../../core/utils/units-converters/rem.mjs";
+import { getThemeColor } from "../../core/config-provider/color-functions/get-theme-color/get-theme-color.mjs";
+import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
+//#region packages/@cck-ui/core/src/components/splitter/splitter.utils.ts
+const varsResolver = createVarsResolver((theme, { lineSize, handleColor }) => ({ root: {
+	"--splitter-line-size": rem(lineSize),
+	"--splitter-handle-color": handleColor ? getThemeColor(handleColor, theme) : void 0
+} }));
+//#endregion
+export { varsResolver };
+
+//# sourceMappingURL=splitter.utils.mjs.map

package/esm/components/splitter/splitter.utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"splitter.utils.mjs","names":[],"sources":["../../../src/components/splitter/splitter.utils.ts"],"sourcesContent":["import { createVarsResolver, getThemeColor, rem } from '../../core'\nimport { SplitterFactory } from './splitter.types'\n\nexport const varsResolver = createVarsResolver<SplitterFactory>(\n  (theme, { lineSize, handleColor }) => ({\n    root: {\n      '--splitter-line-size': rem(lineSize),\n      '--splitter-handle-color': handleColor ? getThemeColor(handleColor, theme) : undefined,\n    },\n  })\n)\n"],"mappings":";;;;;AAGA,MAAa,eAAe,oBACzB,OAAO,EAAE,UAAU,mBAAmB,EACrC,MAAM;CACJ,wBAAwB,IAAI,QAAQ;CACpC,2BAA2B,cAAc,cAAc,aAAa,KAAK,IAAI,KAAA;AAC/E,EACF,EACF"}