@pixelium/web-vue 0.0.2 → 0.0.3-beta

package/es/button-group/index.js

@@ -1,33 +1,61 @@
 import './css.js'
-import { defineComponent, provide, createElementBlock, openBlock, renderSlot } from "vue";
-import { e as emitParentUpdate } from "../share/hook/use-index-of-children.js";
-import { B as BUTTON_GROUP_UPDATE } from "../share/const/event-bus-key.js";
-import { B as BUTTON_GROUP_PROVIDE } from "../share/const/provide-key.js";
-const _hoisted_1 = { class: "pixelium px-button-group" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "ButtonGroup"
-  },
-  __name: "index",
-  props: {
-    borderRadius: null,
-    shape: { default: "default" },
-    size: { default: "medium" },
-    disabled: { type: Boolean, default: false },
-    loading: { type: Boolean },
-    variant: null
-  },
-  setup(__props) {
-    const props = __props;
-    provide(BUTTON_GROUP_PROVIDE, props);
-    emitParentUpdate(BUTTON_GROUP_UPDATE);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        renderSlot(_ctx.$slots, "default")
-      ]);
-    };
-  }
+import { t as BUTTON_GROUP_UPDATE } from "../share/const/event-bus-key.js";
+import { t as emitParentUpdate } from "../share/hook/use-index-of-children.js";
+import { a as FORM_PROVIDE, i as FORM_ITEM_PROVIDE, t as BUTTON_GROUP_PROVIDE } from "../share/const/provide-key.js";
+import { t as createProvideComputed } from "../share/util/reactivity.js";
+import { createElementBlock, defineComponent, inject, openBlock, provide, ref, renderSlot, toRefs } from "vue";
+var _hoisted_1 = { class: "pixelium px-button-group" };
+var button_group_default = /* @__PURE__ */ defineComponent({
+	name: "ButtonGroup",
+	__name: "index",
+	props: {
+		borderRadius: null,
+		shape: { default: "rect" },
+		size: null,
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		loading: { type: Boolean },
+		variant: null,
+		theme: null
+	},
+	setup(__props) {
+		const props = __props;
+		const formProvide = inject(FORM_PROVIDE);
+		const formItemProvide = inject(FORM_ITEM_PROVIDE);
+		const sizeComputed = createProvideComputed("size", () => [
+			props.size && props,
+			formItemProvide,
+			formProvide,
+			props
+		], "nullish", (val) => val || "medium");
+		const disabledComputed = createProvideComputed("disabled", [
+			formItemProvide,
+			formProvide,
+			props
+		], (pre, value, cur) => {
+			return pre || value || "readonly" in cur && cur["readonly"].value;
+		});
+		const childrenInfo = ref([]);
+		provide(BUTTON_GROUP_PROVIDE, {
+			...toRefs(props),
+			size: sizeComputed,
+			disabled: disabledComputed,
+			childrenInfo,
+			collectChildrenInfo: (info) => {
+				const idx = childrenInfo.value.findIndex((e) => e.id === info.id);
+				if (idx >= 0) childrenInfo.value[idx] = info;
+				else childrenInfo.value.push(info);
+			},
+			removeChildrenInfo: (id) => {
+				childrenInfo.value = childrenInfo.value.filter((e) => e.id != id);
+			}
+		});
+		emitParentUpdate(BUTTON_GROUP_UPDATE);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")]);
+		};
+	}
 });
-export {
-  _sfc_main as _
-};
+export { button_group_default as t };

package/es/button-group/type.d.ts

@@ -1,4 +1,6 @@
-import type { NumberOrPercentage } from '../share/type';
+import type { Ref, ToRefs } from 'vue';
+import type { LooseRequired, NumberOrPercentage } from '../share/type';
+import type { ButtonProps } from '../button/type';
 export type ButtonGroupProps = {
     /**
      * @property {NumberOrPercentage | NumberOrPercentage[]} [borderRadius]
@@ -6,13 +8,13 @@ export type ButtonGroupProps = {
      */
     borderRadius?: NumberOrPercentage | NumberOrPercentage[];
     /**
-     * @property {'default' | 'round'} [shape='default']
+     * @property {'rect' | 'round'} [shape='rect']
      * @version 0.0.0-beta
      */
-    shape?: 'default' | 'round';
+    shape?: 'rect' | 'round' | 'default';
     /**
      * @property {'medium' | 'large' | 'small'} [size='medium']
-     * @version 0.0.0-beta
+     * @version 0.0.3
      */
     size?: 'medium' | 'large' | 'small';
     /**
@@ -30,6 +32,11 @@ export type ButtonGroupProps = {
      * @version 0.0.0-beta
      */
     variant?: 'primary' | 'plain' | 'text' | 'outline';
+    /**
+     * @property {'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'info'} [theme]
+     * @version 0.0.0-beta
+     */
+    theme?: 'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'info';
 };
 export type ButtonGroupSlots = {
     /**
@@ -38,3 +45,13 @@ export type ButtonGroupSlots = {
      */
     default: {};
 };
+export type ChildrenInfo = {
+    id: string;
+    variant?: ButtonProps['variant'];
+    index: number;
+};
+export type ButtonGroupProvide = ToRefs<LooseRequired<ButtonGroupProps>> & {
+    childrenInfo: Ref<ChildrenInfo[]>;
+    collectChildrenInfo: (info: ChildrenInfo) => void;
+    removeChildrenInfo: (id: string) => void;
+};

package/es/checkbox/css.js

@@ -0,0 +1,2 @@
+import '../index.css'
+import './index.css'

package/es/checkbox/draw.d.ts

@@ -0,0 +1,4 @@
+export declare const drawBorder: (ctx: CanvasRenderingContext2D, width: number, height: number, borderColor: string, pixelSize: number) => void;
+export declare const drawBracketBorder: (ctx: CanvasRenderingContext2D, width: number, height: number, borderColor: string, pixelSize: number) => void;
+export declare const drawAsteriskMark: (ctx: CanvasRenderingContext2D, size: number, interval: number, color: string, pixelSize: number) => void;
+export declare const drawLineMark: (ctx: CanvasRenderingContext2D, size: number, interval: number, color: string, pixelSize: number) => void;

package/es/checkbox/draw.js

@@ -0,0 +1,46 @@
+import { a as INV_SQRT3 } from "../share/const/index.js";
+import { d as roundToPixel } from "../share/util/plot.js";
+const drawBorder = (ctx, width, height, borderColor, pixelSize) => {
+	ctx.fillStyle = borderColor;
+	ctx.fillRect(pixelSize, 0, width - pixelSize * 2, pixelSize);
+	ctx.fillRect(width - pixelSize, pixelSize, pixelSize, height - pixelSize * 2);
+	ctx.fillRect(pixelSize, height - pixelSize, width - pixelSize * 2, pixelSize);
+	ctx.fillRect(0, pixelSize, pixelSize, height - pixelSize * 2);
+};
+const drawBracketBorder = (ctx, width, height, borderColor, pixelSize) => {
+	ctx.fillStyle = borderColor;
+	const bracketWidth = Math.floor(width / 3);
+	ctx.fillRect(0, 0, bracketWidth, pixelSize);
+	ctx.fillRect(width - bracketWidth, 0, bracketWidth, pixelSize);
+	ctx.fillRect(width - pixelSize, pixelSize, pixelSize, height - pixelSize * 2);
+	ctx.fillRect(0, height - pixelSize, bracketWidth, pixelSize);
+	ctx.fillRect(width - bracketWidth, height - pixelSize, bracketWidth, pixelSize);
+	ctx.fillRect(0, pixelSize, pixelSize, height - pixelSize * 2);
+};
+const drawAsteriskMark = (ctx, size, interval, color, pixelSize) => {
+	ctx.fillStyle = color;
+	let areaSize = roundToPixel(size - pixelSize * 2 - interval * 2, pixelSize);
+	while (Math.round(areaSize / pixelSize) <= 3) areaSize += pixelSize;
+	const offset = Math.round((size - areaSize) / 2);
+	const steps = Math.round(areaSize / pixelSize);
+	let mid = steps >> 1;
+	if (steps % 2 === 0) mid -= .5;
+	ctx.fillRect(offset + mid * pixelSize, offset, pixelSize, areaSize);
+	const offset4Slash = mid * pixelSize - mid * pixelSize * INV_SQRT3;
+	for (let i = 0; i < steps; i++) {
+		const y = Math.round(offset + offset4Slash + i * pixelSize * INV_SQRT3);
+		ctx.fillRect(offset + i * pixelSize, y, pixelSize, pixelSize);
+		ctx.fillRect(offset + (steps - i) * pixelSize - pixelSize, y, pixelSize, pixelSize);
+	}
+};
+const drawLineMark = (ctx, size, interval, color, pixelSize) => {
+	ctx.fillStyle = color;
+	let areaSize = roundToPixel(size - pixelSize * 2 - interval * 2, pixelSize);
+	while (Math.round(areaSize / pixelSize) <= 3) areaSize += pixelSize;
+	const offset = Math.round((size - areaSize) / 2);
+	const steps = Math.round(areaSize / pixelSize);
+	let mid = steps >> 1;
+	if (steps % 2 === 0) mid -= .5;
+	ctx.fillRect(offset, offset + mid * pixelSize, areaSize, pixelSize);
+};
+export { drawLineMark as i, drawBorder as n, drawBracketBorder as r, drawAsteriskMark as t };

package/es/checkbox/index.css

@@ -0,0 +1,85 @@
+.px-checkbox {
+  --checkbox-size: var(--px-medium-compat-size);
+  --text-color: var(--px-neutral-10);
+  color: var(--text-color);
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  transition: 0.25s all;
+}
+.px-checkbox.px-checkbox {
+  font-size: 14px;
+}
+.px-checkbox__large {
+  --checkbox-size: var(--px-large-compat-size);
+  font-size: 15px;
+}
+.px-checkbox__large .px-checkbox-box {
+  margin-right: 12px;
+}
+.px-checkbox__small {
+  --checkbox-size: var(--px-small-compat-size);
+  font-size: 12px;
+}
+.px-checkbox__small .px-checkbox-box {
+  margin-right: 4px;
+}
+.px-checkbox-box {
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  border: var(--px-bit) solid transparent;
+  background-color: transparent;
+  position: relative;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  flex-grow: 0;
+  margin-right: 8px;
+  transition: 0.25s;
+  z-index: 0;
+}
+.px-checkbox-box > .px-checkbox-checked-mark {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  fill: var(--px-primary-6);
+  width: 100%;
+  height: 100%;
+}
+.px-checkbox-canvas {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  z-index: -1;
+}
+.px-checkbox-input {
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+}
+.px-checkbox:hover .px-checkbox-checked-mark {
+  fill: var(--px-primary-5);
+}
+.px-checkbox__checked {
+  --text-color: var(--px-primary-6);
+}
+.px-checkbox__readonly {
+  cursor: default;
+}
+.px-checkbox__disabled {
+  cursor: not-allowed;
+  --text-color: var(--px-neutral-8);
+}
+.px-checkbox__disabled .px-checkbox-checked-mark {
+  fill: var(--px-neutral-8);
+}
+.px-checkbox__disabled.px-checkbox__checked {
+  --text-color: var(--px-primary-2);
+}
+.px-checkbox__disabled.px-checkbox__checked .px-checkbox-checked-mark {
+  fill: var(--px-primary-2);
+}

package/es/checkbox/index.d.ts

@@ -0,0 +1,31 @@
+import type { CheckboxProps } from './type';
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<CheckboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: boolean, event: Event) => any;
+    blur: (event: FocusEvent) => any;
+    input: (value: boolean, event: InputEvent) => any;
+    focus: (event: FocusEvent) => any;
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<CheckboxProps> & Readonly<{
+    onChange?: ((value: boolean, event: Event) => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onInput?: ((value: boolean, event: InputEvent) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    readonly: boolean;
+    modelValue: boolean | null;
+    defaultValue: boolean | null;
+    indeterminate: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/checkbox/index.js

@@ -0,0 +1,206 @@
+import './css.js'
+import { t as check_solid_default } from "../vendor.js";
+import { n as INTERVAL } from "../share/const/style.js";
+import { i as canvasPreprocess, n as calcPixelSize } from "../share/util/plot.js";
+import { r as getGlobalThemeColorString } from "../share/util/color.js";
+import { t as useDarkMode } from "../share/hook/use-dark-mode.js";
+import { t as useResizeObserver } from "../share/hook/use-resize-observer.js";
+import { t as useWatchGlobalCssVal } from "../share/hook/use-watch-global-css-var.js";
+import { i as FORM_ITEM_PROVIDE, n as CHECKBOX_GROUP_PROVIDE } from "../share/const/provide-key.js";
+import { t as createProvideComputed } from "../share/util/reactivity.js";
+import { t as useTransitionEnd } from "../share/hook/use-transition-end.js";
+import { t as useControlledMode } from "../share/hook/use-controlled-mode.js";
+import { i as drawLineMark, n as drawBorder, r as drawBracketBorder, t as drawAsteriskMark } from "./draw.js";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, inject, nextTick, normalizeClass, onMounted, openBlock, ref, renderSlot, shallowRef, toDisplayString, unref, watch, withModifiers } from "vue";
+var _hoisted_1 = [
+	"disabled",
+	"value",
+	"checked"
+];
+var checkbox_default = /* @__PURE__ */ defineComponent({
+	name: "Checkbox",
+	__name: "index",
+	props: {
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultValue: {
+			type: Boolean,
+			default: void 0
+		},
+		indeterminate: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		variant: null,
+		label: null,
+		value: null,
+		size: null
+	},
+	emits: [
+		"update:modelValue",
+		"input",
+		"change",
+		"focus",
+		"blur"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const [modelValue, updateModelValue] = useControlledMode("modelValue", props, emits, {
+			defaultField: "defaultValue",
+			transform: (val) => !!val
+		});
+		const formItemProvide = inject(FORM_ITEM_PROVIDE);
+		const checkboxGroupProvide = inject(CHECKBOX_GROUP_PROVIDE);
+		const sizeComputed = createProvideComputed("size", () => [
+			checkboxGroupProvide,
+			props.size && props,
+			formItemProvide,
+			props
+		], "nullish", (val) => val || "medium");
+		const variantComputed = createProvideComputed("variant", [checkboxGroupProvide, props], "nullish", (val) => val || "normal");
+		const disabledComputed = createProvideComputed("disabled", [
+			checkboxGroupProvide,
+			formItemProvide,
+			props
+		], "or");
+		const readonlyComputed = createProvideComputed("readonly", [
+			checkboxGroupProvide,
+			formItemProvide,
+			props
+		], "or");
+		const canvasRef = shallowRef(null);
+		const boxRef = shallowRef(null);
+		const focusFlag = ref(false);
+		const hoverFlag = ref(false);
+		const mouseenterHandler = () => {
+			hoverFlag.value = true;
+		};
+		const mouseleaveHandler = () => {
+			hoverFlag.value = false;
+		};
+		const blurHandler = (e) => {
+			emits("blur", e);
+			focusFlag.value = false;
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.blurHandler();
+		};
+		const focusHandler = (e) => {
+			focusFlag.value = true;
+			emits("focus", e);
+		};
+		const inputHandler = async (e) => {
+			const newValue = e.target.checked;
+			modelValue.value = newValue;
+			emits("input", newValue, e);
+			await updateModelValue(newValue);
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.inputHandler();
+		};
+		const changeHandler = (e) => {
+			const target = e.target;
+			emits("change", target.checked, e);
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.changeHandler();
+		};
+		if (checkboxGroupProvide) {
+			watch(() => checkboxGroupProvide.modelValue.value, (newValue) => {
+				modelValue.value = !newValue ? false : newValue.includes(props.value);
+			}, { immediate: true });
+			watch(modelValue, (newValue) => {
+				if (!checkboxGroupProvide) return;
+				checkboxGroupProvide.updateValue(props.value, !!newValue);
+			});
+		}
+		const drawPixel = () => {
+			const preprocessData = canvasPreprocess(boxRef, canvasRef);
+			if (!preprocessData) return;
+			const { ctx, width, height } = preprocessData;
+			const pixelSize = calcPixelSize();
+			const mainColor = disabledComputed.value ? modelValue.value || props.indeterminate ? getGlobalThemeColorString("primary", 2) : getGlobalThemeColorString("neutral", 8) : hoverFlag.value && !readonlyComputed.value ? getGlobalThemeColorString("primary", 5) : modelValue.value || props.indeterminate ? getGlobalThemeColorString("primary", 6) : getGlobalThemeColorString("neutral", 10);
+			const backgroundColor = getGlobalThemeColorString("neutral", 1);
+			const intervalSize = 4;
+			if (variantComputed.value === "normal") {
+				drawBorder(ctx, width, height, mainColor, pixelSize);
+				ctx.fillStyle = backgroundColor;
+				ctx.fillRect(pixelSize, pixelSize, width - pixelSize * 2, height - pixelSize * 2);
+				if (props.indeterminate) {
+					ctx.fillStyle = mainColor;
+					ctx.fillRect(pixelSize + intervalSize, pixelSize + intervalSize, width - pixelSize * 2 - intervalSize * 2, height - pixelSize * 2 - intervalSize * 2);
+				}
+			} else {
+				drawBracketBorder(ctx, width, height, mainColor, pixelSize);
+				const size = Math.min(width, height);
+				if (props.indeterminate) drawLineMark(ctx, size, intervalSize, mainColor, pixelSize);
+				else if (modelValue.value) drawAsteriskMark(ctx, size, intervalSize, mainColor, pixelSize);
+			}
+		};
+		onMounted(() => {
+			nextTick(() => {
+				drawPixel();
+			});
+		});
+		watch([
+			useDarkMode(),
+			hoverFlag,
+			focusFlag,
+			modelValue,
+			() => props.indeterminate,
+			disabledComputed,
+			readonlyComputed,
+			sizeComputed,
+			variantComputed
+		], () => {
+			drawPixel();
+		});
+		useResizeObserver(boxRef, drawPixel);
+		useWatchGlobalCssVal(drawPixel);
+		useTransitionEnd(boxRef, drawPixel);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("label", {
+				class: normalizeClass(["pixelium px-checkbox", {
+					"px-checkbox__checked": unref(modelValue) || props.indeterminate,
+					"px-checkbox__disabled": unref(disabledComputed),
+					"px-checkbox__readonly": unref(readonlyComputed),
+					[`px-checkbox__${unref(sizeComputed)}`]: unref(sizeComputed),
+					[`px-checkbox__${unref(variantComputed)}`]: unref(variantComputed)
+				}]),
+				onMouseenter: mouseenterHandler,
+				onMouseleave: mouseleaveHandler
+			}, [createElementVNode("div", {
+				class: "px-checkbox-box",
+				ref_key: "boxRef",
+				ref: boxRef
+			}, [
+				createElementVNode("canvas", {
+					class: "px-checkbox-canvas",
+					ref_key: "canvasRef",
+					ref: canvasRef
+				}, null, 512),
+				unref(modelValue) && !props.indeterminate && unref(variantComputed) === "normal" ? (openBlock(), createBlock(unref(check_solid_default), {
+					key: 0,
+					class: "px-checkbox-checked-mark"
+				})) : createCommentVNode("v-if", true),
+				createElementVNode("input", {
+					type: "checkbox",
+					class: "px-checkbox-input",
+					disabled: unref(disabledComputed) || unref(readonlyComputed),
+					value: props.value,
+					checked: !!unref(modelValue),
+					onFocus: focusHandler,
+					onBlur: blurHandler,
+					onInput: withModifiers(inputHandler, ["stop"]),
+					onChange: withModifiers(changeHandler, ["stop"])
+				}, null, 40, _hoisted_1)
+			], 512), renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(props.label), 1)])], 34);
+		};
+	}
+});
+export { checkbox_default as t };

package/es/checkbox/type.d.ts

@@ -0,0 +1,88 @@
+export type CheckboxProps = {
+    /**
+     * @property {boolean | null} [modelValue]
+     * @version 0.0.3
+     */
+    modelValue?: boolean | null;
+    /**
+     * @property {boolean | null} [defaultValue]
+     * @version 0.0.3
+     */
+    defaultValue?: boolean | null;
+    /**
+     * @property {boolean} [indeterminate=false]
+     * @version 0.0.3
+     */
+    indeterminate?: boolean;
+    /**
+     * @property {boolean} [disabled=false]
+     * @version 0.0.3
+     */
+    disabled?: boolean;
+    /**
+     * @property {boolean} [readonly=false]
+     * @version 0.0.3
+     */
+    readonly?: boolean;
+    /**
+     * @property {'normal' | 'retro'} [variant='normal']
+     * @version 0.0.3
+     */
+    variant?: 'normal' | 'retro';
+    /**
+     * @property {string} [label]
+     * @version 0.0.3
+     */
+    label?: string;
+    /**
+     * @property {any} [value]
+     * @version 0.0.3
+     */
+    value?: any;
+    /**
+     * @property {'medium' | 'large' | 'small'} [size='medium']
+     * @version 0.0.3
+     */
+    size?: 'medium' | 'large' | 'small';
+};
+export type CheckboxEvents = {
+    /**
+     * @event update:modelValue
+     * @param {boolean} value
+     * @version 0.0.3
+     */
+    'update:modelValue': [value: boolean];
+    /**
+     * @event input
+     * @param {boolean} value
+     * @param {InputEvent} event
+     * @version 0.0.3
+     */
+    input: [value: boolean, event: InputEvent];
+    /**
+     * @event change
+     * @param {boolean} value
+     * @param {Event} event
+     * @version 0.0.3
+     */
+    change: [value: boolean, event: Event];
+    /**
+     * @event focus
+     * @param {FocusEvent} event
+     * @version 0.0.3
+     */
+    focus: [event: FocusEvent];
+    /**
+     * @event blur
+     * @param {FocusEvent} event
+     * @version 0.0.3
+     */
+    blur: [event: FocusEvent];
+};
+export type CheckboxSlots = {
+    /**
+     * @slot default
+     * @version 0.0.3
+     */
+    default: {};
+};

package/es/checkbox-group/css.js

@@ -0,0 +1,2 @@
+import '../index.css'
+import './index.css'

package/es/checkbox-group/index.css

@@ -0,0 +1,20 @@
+div.px-checkbox-group {
+  font-size: 0;
+}
+.px-checkbox-group {
+  display: inline-block;
+}
+.px-checkbox-group-inner {
+  display: inline-flex;
+  flex-wrap: wrap;
+  margin: -8px;
+}
+.px-checkbox-group-inner > * {
+  margin: 8px;
+}
+.px-checkbox-group__vertical {
+  display: inline-block;
+}
+.px-checkbox-group__vertical > .px-checkbox-group-inner {
+  flex-direction: column;
+}

package/es/checkbox-group/index.d.ts

@@ -0,0 +1,23 @@
+import type { CheckboxGroupProps } from './type';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<CheckboxGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: any[]) => any;
+    "update:modelValue": (value: any[]) => any;
+}, string, import("vue").PublicProps, Readonly<CheckboxGroupProps> & Readonly<{
+    onChange?: ((value: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    readonly: boolean;
+    direction: "horizontal" | "vertical";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};