lkd-web-kit 0.7.7 → 0.7.9

package/dist/components/MyCheckboxGroup/index.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const core = require('@mantine/core');
+
+const MyCheckboxGroup = ({
+  options,
+  orientation = "horizontal",
+  gap = "md",
+  ...checkboxGroupProps
+}) => {
+  const Container = orientation === "horizontal" ? core.Group : core.Stack;
+  return /* @__PURE__ */ jsxRuntime.jsx(core.CheckboxGroup, { ...checkboxGroupProps, children: /* @__PURE__ */ jsxRuntime.jsx(Container, { gap, children: options.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    core.Checkbox,
+    {
+      ...option
+    },
+    String(option.value) || String(index)
+  )) }) });
+};
+
+exports.MyCheckboxGroup = MyCheckboxGroup;

package/dist/components/MyCheckboxGroup/index.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { CheckboxGroup, Group, Stack, Checkbox } from '@mantine/core';
+
+const MyCheckboxGroup = ({
+  options,
+  orientation = "horizontal",
+  gap = "md",
+  ...checkboxGroupProps
+}) => {
+  const Container = orientation === "horizontal" ? Group : Stack;
+  return /* @__PURE__ */ jsx(CheckboxGroup, { ...checkboxGroupProps, children: /* @__PURE__ */ jsx(Container, { gap, children: options.map((option, index) => /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      ...option
+    },
+    String(option.value) || String(index)
+  )) }) });
+};
+
+export { MyCheckboxGroup };

package/dist/form/base/FormCheckbox.cjs

@@ -10,7 +10,13 @@ const FormCheckbox = withController.withController(({ field, props }) => /* @__P
   core.Checkbox,
   {
     ...field,
-    checked: field.value,
+    checked: Boolean(field.value),
+    onChange: (e) => {
+      if (props.value)
+        field.onChange(e.currentTarget.checked ? props.value : "");
+      else
+        field.onChange(e.currentTarget.checked);
+    },
     ...props
   }
 ));

package/dist/form/base/FormCheckbox.js

@@ -6,7 +6,13 @@ const FormCheckbox = withController(({ field, props }) => /* @__PURE__ */ jsx(
   Checkbox,
   {
     ...field,
-    checked: field.value,
+    checked: Boolean(field.value),
+    onChange: (e) => {
+      if (props.value)
+        field.onChange(e.currentTarget.checked ? props.value : "");
+      else
+        field.onChange(e.currentTarget.checked);
+    },
     ...props
   }
 ));

package/dist/form/base/FormCheckboxGroup.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const index = require('../../components/MyCheckboxGroup/index.cjs');
+const withController = require('../../hocs/withController.cjs');
+
+const FormCheckboxGroup = withController.withController(({ field, props }) => /* @__PURE__ */ jsxRuntime.jsx(
+  index.MyCheckboxGroup,
+  {
+    ...field,
+    ...props
+  }
+));
+
+exports.FormCheckboxGroup = FormCheckboxGroup;

package/dist/form/base/FormCheckboxGroup.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { MyCheckboxGroup } from '../../components/MyCheckboxGroup/index.js';
+import { withController } from '../../hocs/withController.js';
+
+const FormCheckboxGroup = withController(({ field, props }) => /* @__PURE__ */ jsx(
+  MyCheckboxGroup,
+  {
+    ...field,
+    ...props
+  }
+));
+
+export { FormCheckboxGroup };

package/dist/index.cjs

@@ -19,10 +19,11 @@ const index$b = require('./components/SelectInfinity/index.cjs');
 const index$c = require('./components/MyMultiSelect/index.cjs');
 const index$d = require('./components/MyMonthPickerInput/index.cjs');
 const index$e = require('./components/MyDateInput/index.cjs');
+const index$f = require('./components/MyCheckboxGroup/index.cjs');
 const httpStatus = require('./consts/http-status.cjs');
 const revalidate = require('./consts/revalidate.cjs');
-const index$f = require('./contexts/NavigationHistoryContext/index.cjs');
-const index$g = require('./contexts/PageDataContext/index.cjs');
+const index$g = require('./contexts/NavigationHistoryContext/index.cjs');
+const index$h = require('./contexts/PageDataContext/index.cjs');
 const Form = require('./form/Form.cjs');
 const FormButtonSubmit = require('./form/FormButtonSubmit.cjs');
 const zodValidator = require('./form/utils/zodValidator.cjs');
@@ -41,6 +42,7 @@ const FormTimeInput = require('./form/base/FormTimeInput.cjs');
 const FormMultiSelect = require('./form/base/FormMultiSelect.cjs');
 const FormMonthPickerInput = require('./form/base/FormMonthPickerInput.cjs');
 const FormDateInput = require('./form/base/FormDateInput.cjs');
+const FormCheckboxGroup = require('./form/base/FormCheckboxGroup.cjs');
 const withController = require('./hocs/withController.cjs');
 const withModalManager = require('./hocs/withModalManager.cjs');
 const useBreakpoint = require('./hooks/useBreakpoint.cjs');
@@ -80,13 +82,14 @@ exports.InfinitySelect = index$b.InfinitySelect;
 exports.MyMultiSelect = index$c.MyMultiSelect;
 exports.MyMonthPickerInput = index$d.MyMonthPickerInput;
 exports.MyDateInput = index$e.MyDateInput;
+exports.MyCheckboxGroup = index$f.MyCheckboxGroup;
 exports.HttpStatus = httpStatus.HttpStatus;
 exports.Revalidate = revalidate.Revalidate;
-exports.NavigationHistoryProvider = index$f.NavigationHistoryProvider;
-exports.QP_BACK_URL_NAME = index$f.QP_BACK_URL_NAME;
-exports.useNavigationHistory = index$f.useNavigationHistory;
-exports.PageDataProvider = index$g.PageDataProvider;
-exports.usePageData = index$g.usePageData;
+exports.NavigationHistoryProvider = index$g.NavigationHistoryProvider;
+exports.QP_BACK_URL_NAME = index$g.QP_BACK_URL_NAME;
+exports.useNavigationHistory = index$g.useNavigationHistory;
+exports.PageDataProvider = index$h.PageDataProvider;
+exports.usePageData = index$h.usePageData;
 exports.Form = Form.Form;
 exports.FormButtonSubmit = FormButtonSubmit.FormButtonSubmit;
 exports.zodValidator = zodValidator.zodValidator;
@@ -107,6 +110,7 @@ exports.timeInputToNumber = FormTimeInput.timeInputToNumber;
 exports.FormMultiSelect = FormMultiSelect.FormMultiSelect;
 exports.FormMonthPickerInput = FormMonthPickerInput.FormMonthPickerInput;
 exports.FormDateInput = FormDateInput.FormDateInput;
+exports.FormCheckboxGroup = FormCheckboxGroup.FormCheckboxGroup;
 exports.withController = withController.withController;
 exports.withModalManager = withModalManager.withModalManager;
 exports.useBreakpoint = useBreakpoint.useBreakpoint;

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import { BoxProps } from '@mantine/core';
 import { ButtonProps } from '@mantine/core';
 import { CenterProps } from '@mantine/core';
 import { ChangeEventHandler } from 'react';
+import { CheckboxGroupProps } from '@mantine/core';
 import { CheckboxProps } from '@mantine/core';
 import { ComboboxItem } from '@mantine/core';
 import { ComboboxProps } from '@mantine/core';
@@ -123,6 +124,12 @@ export declare const FormCheckbox: FC<CheckboxProps & WithControllerProps & {
 onValueChange?: ChangeEventHandler<HTMLInputElement> | undefined;
 }>;
 
+export declare const FormCheckboxGroup: FC<MyCheckboxGroupProps & WithControllerProps & {
+onValueChange?: ((value: string[]) => void) | undefined;
+}>;
+
+export declare type FormCheckboxGroupProps = MyCheckboxGroupProps & WithControllerProps;
+
 export declare type FormCheckboxProps = CheckboxProps & WithControllerProps;
 
 export declare const FormDateInput: FC<WithControllerProps & MyDateInputProps & {
@@ -380,6 +387,15 @@ export declare type ModalManagerWrapperProps<T extends object = object> = T & {
     removeModal: () => void;
 };
 
+export declare const MyCheckboxGroup: ({ options, orientation, gap, ...checkboxGroupProps }: MyCheckboxGroupProps) => JSX.Element;
+
+export declare interface MyCheckboxGroupProps extends Omit<CheckboxGroupProps, 'children'> {
+    options: CheckboxProps[];
+    orientation?: 'horizontal' | 'vertical';
+    gap?: MantineSpacing;
+    disabled?: boolean;
+}
+
 export declare const MyDateInput: (props: MyDateInputProps) => JSX.Element;
 
 export declare interface MyDateInputProps extends DateInputProps {

package/dist/index.js

@@ -15,6 +15,7 @@ export { InfinitySelect } from './components/SelectInfinity/index.js';
 export { MyMultiSelect } from './components/MyMultiSelect/index.js';
 export { MyMonthPickerInput } from './components/MyMonthPickerInput/index.js';
 export { MyDateInput } from './components/MyDateInput/index.js';
+export { MyCheckboxGroup } from './components/MyCheckboxGroup/index.js';
 export { HttpStatus } from './consts/http-status.js';
 export { Revalidate } from './consts/revalidate.js';
 export { NavigationHistoryProvider, QP_BACK_URL_NAME, useNavigationHistory } from './contexts/NavigationHistoryContext/index.js';
@@ -37,6 +38,7 @@ export { FormTimeInput, numberToTimeInput, timeInputToNumber } from './form/base
 export { FormMultiSelect } from './form/base/FormMultiSelect.js';
 export { FormMonthPickerInput } from './form/base/FormMonthPickerInput.js';
 export { FormDateInput } from './form/base/FormDateInput.js';
+export { FormCheckboxGroup } from './form/base/FormCheckboxGroup.js';
 export { withController } from './hocs/withController.js';
 export { withModalManager } from './hocs/withModalManager.js';
 export { useBreakpoint } from './hooks/useBreakpoint.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkd-web-kit",
-  "version": "0.7.7",
+  "version": "0.7.9",
   "description": "A template for creating React component libraries with Vite.",
   "author": "LKD",
   "license": "MIT",