@geneui/components 3.0.0-next-f0c40b8-25112024 → 3.0.0-next-65b0240-02122024

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/Checkbox.js +99 -0
  2. package/HelperText.js +2 -2
  3. package/Label.js +6 -6
  4. package/ProgressBar.js +1 -1
  5. package/components/atoms/HelperText/HelperText.d.ts +4 -4
  6. package/components/atoms/Label/Label.d.ts +5 -0
  7. package/components/molecules/Checkbox/Checkbox.d.ts +80 -0
  8. package/components/molecules/Checkbox/index.d.ts +1 -0
  9. package/package.json +1 -1
package/Checkbox.js ADDED
@@ -0,0 +1,99 @@
1
+ import React__default, { useRef, useState, useEffect, useMemo } from 'react';
2
+ import { _ as _objectWithoutProperties, a as _extends } from './ArrowLeft-b88e2ba8.js';
3
+ import { c as classNames } from './index-ce02421b.js';
4
+ import Label from './Label.js';
5
+ import HelperText from './HelperText.js';
6
+ import { s as styleInject } from './style-inject.es-746bb8ed.js';
7
+ import './Tooltip.js';
8
+ import 'react-dom';
9
+ import './GeneUIProvider.js';
10
+ import './useEllipsisDetection-46d712b6.js';
11
+ import './Info.js';
12
+
13
+ var _excluded$1 = ["size", "color"];
14
+ var SvgCheckMark = function SvgCheckMark(_ref) {
15
+ var _ref$size = _ref.size,
16
+ size = _ref$size === void 0 ? 24 : _ref$size,
17
+ _ref$color = _ref.color,
18
+ color = _ref$color === void 0 ? "currentColor" : _ref$color,
19
+ props = _objectWithoutProperties(_ref, _excluded$1);
20
+ return /*#__PURE__*/React__default.createElement("svg", _extends({
21
+ width: size,
22
+ height: size,
23
+ viewBox: "0 0 24 24",
24
+ fill: color,
25
+ xmlns: "http://www.w3.org/2000/svg"
26
+ }, props), /*#__PURE__*/React__default.createElement("path", {
27
+ d: "M9.19 19.25a.75.75 0 0 1-.564-.255l-5.44-6.188a.756.756 0 0 1 .612-1.248.75.75 0 0 1 .516.253l4.867 5.535 10.491-12.33a.75.75 0 0 1 1.322.426.756.756 0 0 1-.176.55l-11.055 12.992a.756.756 0 0 1-.567.265h-.006Z",
28
+ fill: color
29
+ }));
30
+ };
31
+
32
+ var _excluded = ["size", "color"];
33
+ var SvgMinusOutline = function SvgMinusOutline(_ref) {
34
+ var _ref$size = _ref.size,
35
+ size = _ref$size === void 0 ? 24 : _ref$size,
36
+ _ref$color = _ref.color,
37
+ color = _ref$color === void 0 ? "currentColor" : _ref$color,
38
+ props = _objectWithoutProperties(_ref, _excluded);
39
+ return /*#__PURE__*/React__default.createElement("svg", _extends({
40
+ width: size,
41
+ height: size,
42
+ viewBox: "0 0 24 24",
43
+ fill: color,
44
+ xmlns: "http://www.w3.org/2000/svg"
45
+ }, props), /*#__PURE__*/React__default.createElement("path", {
46
+ d: "M20.153 12.75h-16.306a.905.905 0 0 1-.599-.22.71.71 0 0 1-.248-.53c0-.199.09-.39.248-.53a.905.905 0 0 1 .599-.22h16.306c.225 0 .44.079.599.22a.71.71 0 0 1 .248.53.71.71 0 0 1-.248.53.905.905 0 0 1-.599.22Z",
47
+ fill: color
48
+ }));
49
+ };
50
+
51
+ var css_248z = ".checkbox{display:inline-flex;flex-direction:column;max-width:100%;min-width:0}.checkbox__input{-webkit-appearance:none;appearance:none;background:none;border:none;border-radius:var(--guit-ref-radius-4xsmall);height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.checkbox__input:checked+.checkbox__imitation,.checkbox__input:indeterminate+.checkbox__imitation{background-color:var(--guit-sem-color-background-selected-2);border-color:var(--guit-sem-color-background-selected-2)}.checkbox__input:checked+.checkbox__imitation:hover,.checkbox__input:indeterminate+.checkbox__imitation:hover{background-color:var(--guit-sem-color-background-selected-2-hover);border-color:var(--guit-sem-color-background-selected-2-hover)}.checkbox__input:checked+.checkbox__imitation:active,.checkbox__input:indeterminate+.checkbox__imitation:active{background-color:var(--guit-sem-color-background-selected-2-pressed);border-color:var(--guit-sem-color-background-selected-2-pressed)}.checkbox__input:checked+.checkbox__imitation .checkbox__icon,.checkbox__input:indeterminate+.checkbox__imitation .checkbox__icon{opacity:1}.checkbox__label{display:flex}.checkbox__imitationHolder{align-items:center;display:flex;flex:0 0 auto;height:var(--guit-sem-dimension-height-small);justify-content:center;width:var(--guit-sem-dimension-width-small)}.checkbox__imitationHolder .checkbox__input:not(:checked,:indeterminate)+.checkbox__imitation:hover{background-color:var(--guit-sem-color-background-transparent-1-hover)}.checkbox__imitationHolder .checkbox__input:not(:checked,:indeterminate)+.checkbox__imitation:active{background-color:var(--guit-sem-color-background-transparent-1-pressed)}.checkbox__imitationHolderInner{align-items:center;display:flex;flex:0 0 auto;height:var(--guit-sem-dimension-height-xsmall);justify-content:center;position:relative;width:var(--guit-sem-dimension-width-xsmall)}.checkbox__imitation{border:var(--guit-ref-border-width-thin) solid var(--guit-sem-color-border-neutral-3);border-radius:var(--guit-ref-radius-4xsmall);height:100%;width:100%}.checkbox__icon{color:var(--guit-sem-color-foreground-inverse);flex:0 0 auto;height:100%;opacity:0;width:100%}.checkbox__infoContainer{display:flex}.checkbox:not(.checkbox_labelTop){gap:var(--guit-ref-spacing-4xsmall)}.checkbox:not(.checkbox_labelTop) .checkbox__infoContainer{padding-inline-start:var(--guit-ref-spacing-4xlarge)}.checkbox:not(.checkbox_labelTop) .checkbox__label{gap:var(--guit-ref-spacing-xsmall)}.checkbox_labelTop{gap:var(--guit-ref-spacing-3xsmall)}.checkbox_labelTop .checkbox__label{align-items:normal;flex-direction:column-reverse;gap:var(--guit-ref-spacing-3xsmall)}.checkbox_error .checkbox__imitationHolder .checkbox__imitationHolderInner .checkbox__imitation{border-color:var(--guit-sem-color-border-error)}.checkbox_disabled{pointer-events:none;-webkit-user-select:none;user-select:none}.checkbox_disabled .checkbox__imitationHolder .checkbox__imitationHolderInner .checkbox__imitation{background-color:var(--guit-sem-color-background-disabled);border-color:var(--guit-sem-color-border-disabled-1)}.checkbox_disabled .checkbox__imitationHolder .checkbox__imitationHolderInner .checkbox__imitation .checkbox__icon{color:var(--guit-sem-color-foreground-disabled)}.checkbox_disabled .checkbox__input:not(:checked,:indeterminate)+.checkbox__imitation{background-color:var(--guit-sem-color-background-transparent-1)}.checkbox_readOnly{pointer-events:none}.checkbox_readOnly .checkbox__imitationHolder .checkbox__imitationHolderInner .checkbox__imitation{background-color:var(--guit-sem-color-background-neutral-3);border-color:#0000}.checkbox_readOnly .checkbox__imitationHolder .checkbox__imitationHolderInner .checkbox__imitation .checkbox__icon{color:var(--guit-sem-color-foreground-neutral-1)}.checkbox_readOnly .checkbox__input:not(:checked,:indeterminate)+.checkbox__imitation{border-color:var(--guit-sem-color-border-neutral-2)}";
52
+ styleInject(css_248z);
53
+
54
+ /**
55
+ * Checkbox component allows users to select one or more options from a set of choices. Each checkbox can be either checked or unchecked, indicating a binary state. Checkboxes are commonly used in forms, settings, and lists where multiple selections are needed.
56
+ */
57
+ const Checkbox = ({ label, required, infoText, disabled, helperText, readOnly, type = "rest", vertical, autoFocus, onChange, onFocus, onBlur, name, indeterminate, checked, defaultChecked, className }) => {
58
+ const interRef = useRef(null);
59
+ const isControlled = checked !== undefined;
60
+ const [checkedState, setCheckedState] = useState(defaultChecked || false);
61
+ const onChangeHandler = (e) => {
62
+ if (!isControlled) {
63
+ setCheckedState(e.target.checked);
64
+ }
65
+ onChange === null || onChange === void 0 ? void 0 : onChange(e);
66
+ };
67
+ const onFocusHandler = (e) => onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
68
+ const onBlurHandler = (e) => onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
69
+ useEffect(() => {
70
+ if (isControlled) {
71
+ setCheckedState(!!checked);
72
+ }
73
+ }, [checked, isControlled]);
74
+ useEffect(() => {
75
+ if (interRef.current) {
76
+ interRef.current.indeterminate = !!indeterminate;
77
+ }
78
+ }, [indeterminate]);
79
+ const resolvedChecked = useMemo(() => {
80
+ const isIndeterminate = indeterminate && !checked;
81
+ if (isIndeterminate)
82
+ return false;
83
+ return isControlled ? checked : checkedState;
84
+ }, [checked, checkedState, indeterminate]);
85
+ return (React__default.createElement("div", Object.assign({ className: classNames("checkbox ", `checkbox_${type}`, {
86
+ checkbox_disabled: disabled,
87
+ checkbox_readOnly: readOnly,
88
+ checkbox_labelTop: vertical
89
+ }, className) }, ((disabled || readOnly) && { tabIndex: -1 })),
90
+ React__default.createElement(Label, { labelText: label, className: "checkbox__label", required: required, infoText: infoText, disabled: disabled, readOnly: readOnly },
91
+ React__default.createElement("span", { className: "checkbox__imitationHolder" },
92
+ React__default.createElement("span", { className: "checkbox__imitationHolderInner" },
93
+ React__default.createElement("input", Object.assign({ type: "checkbox", className: "checkbox__input", onChange: onChangeHandler, onFocus: onFocusHandler, onBlur: onBlurHandler, checked: resolvedChecked, ref: interRef }, (name && { name }), (autoFocus && { autoFocus }), ((disabled || readOnly) && { tabIndex: -1 }))),
94
+ React__default.createElement("span", { className: "checkbox__imitation" }, indeterminate && !checked ? (React__default.createElement(SvgMinusOutline, { className: "checkbox__icon", size: 16 })) : (React__default.createElement(SvgCheckMark, { className: "checkbox__icon", size: 16 })))))),
95
+ helperText && (React__default.createElement("div", { className: "checkbox__infoContainer" },
96
+ React__default.createElement(HelperText, { text: helperText, isDisabled: disabled, type: type })))));
97
+ };
98
+
99
+ export { Checkbox as default };
package/HelperText.js CHANGED
@@ -43,7 +43,7 @@ var SvgWarningFill = function SvgWarningFill(_ref) {
43
43
  }));
44
44
  };
45
45
 
46
- var css_248z = ".helperText{display:inline-flex;gap:var(--guit-ref-spacing-3xsmall);max-width:100%}.helperText_size_medium .helperText__text{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family);font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-medium-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}.helperText_size_small .helperText__text{font-family:var(--guit-sem-font-label-small-default-medium-font-family);font-size:var(--guit-sem-font-label-small-default-medium-font-size);font-weight:var(--guit-sem-font-label-small-default-medium-font-weight);line-height:var(--guit-sem-font-label-small-default-medium-line-height)}.helperText_type_rest{color:var(--guit-sem-color-foreground-neutral-2)}.helperText_type_danger{color:var(--guit-sem-color-foreground-error)}.helperText_type_warning{color:var(--guit-sem-color-foreground-neutral-2)}.helperText_type_warning .helperText__icon{color:var(--guit-sem-color-foreground-warning)}.helperText_disabled,.helperText_disabled .helperText__icon{color:var(--guit-sem-color-foreground-disabled)}.helperText__icon{flex:0 0 auto}";
46
+ var css_248z = ".helperText{display:inline-flex;gap:var(--guit-ref-spacing-3xsmall);max-width:100%}.helperText_size_medium .helperText__text{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family);font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-medium-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}.helperText_size_small .helperText__text{font-family:var(--guit-sem-font-label-small-default-medium-font-family);font-size:var(--guit-sem-font-label-small-default-medium-font-size);font-weight:var(--guit-sem-font-label-small-default-medium-font-weight);line-height:var(--guit-sem-font-label-small-default-medium-line-height)}.helperText_type_rest{color:var(--guit-sem-color-foreground-neutral-2)}.helperText_type_error{color:var(--guit-sem-color-foreground-error)}.helperText_type_warning{color:var(--guit-sem-color-foreground-neutral-2)}.helperText_type_warning .helperText__icon{color:var(--guit-sem-color-foreground-warning)}.helperText_disabled,.helperText_disabled .helperText__icon{color:var(--guit-sem-color-foreground-disabled)}.helperText__icon{flex:0 0 auto}";
47
47
  styleInject(css_248z);
48
48
 
49
49
  const iconSize = {
@@ -55,7 +55,7 @@ const iconSize = {
55
55
  */
56
56
  const HelperText = ({ size = "medium", type = "rest", text, Icon, isDisabled, isLoading, className }) => {
57
57
  const iconMap = {
58
- danger: React__default.createElement(SvgErrorAlertFill, { size: iconSize[size] }),
58
+ error: React__default.createElement(SvgErrorAlertFill, { size: iconSize[size] }),
59
59
  warning: React__default.createElement(SvgWarningFill, { size: iconSize[size] }),
60
60
  rest: Icon && React__default.createElement(Icon, { size: iconSize[size] })
61
61
  };
package/Label.js CHANGED
@@ -8,7 +8,7 @@ import 'react-dom';
8
8
  import './GeneUIProvider.js';
9
9
  import './ArrowLeft-b88e2ba8.js';
10
10
 
11
- var css_248z = ".label{display:inline-flex;max-width:100%}.label,.label__container{align-items:center;min-width:0}.label__container{display:flex;gap:var(--guit-ref-spacing-3xsmall);width:100%}.label__container-inner{align-items:center;display:flex;gap:var(--guit-ref-spacing-4xsmall);max-width:100%}.label__asterisk,.label__text{color:var(--guit-sem-color-foreground-neutral-2)}.label__asterisk_size_medium,.label__text_size_medium{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family);font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-medium-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}.label__asterisk_size_small,.label__text_size_small{font-family:var(--guit-sem-font-label-small-default-medium-font-family);font-size:var(--guit-sem-font-label-small-default-medium-font-size);font-weight:var(--guit-sem-font-label-small-default-medium-font-weight);line-height:var(--guit-sem-font-label-small-default-medium-line-height)}.label__asterisk_disabled,.label__text_disabled{color:var(--guit-sem-color-foreground-disabled);pointer-events:none}";
11
+ var css_248z = ".label{display:inline-flex;max-width:100%}.label,.label__container{align-items:center;min-width:0}.label__container{display:flex;gap:var(--guit-ref-spacing-3xsmall)}.label__container_readOnly{pointer-events:auto}.label__container-inner{align-items:center;display:flex;gap:var(--guit-ref-spacing-4xsmall);max-width:100%}.label__asterisk,.label__text{color:var(--guit-sem-color-foreground-neutral-2)}.label__asterisk_size_medium,.label__text_size_medium{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family);font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-medium-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}.label__asterisk_size_small,.label__text_size_small{font-family:var(--guit-sem-font-label-small-default-medium-font-family);font-size:var(--guit-sem-font-label-small-default-medium-font-size);font-weight:var(--guit-sem-font-label-small-default-medium-font-weight);line-height:var(--guit-sem-font-label-small-default-medium-line-height)}.label__asterisk_disabled,.label__text_disabled{color:var(--guit-sem-color-foreground-disabled);pointer-events:none}";
12
12
  styleInject(css_248z);
13
13
 
14
14
  const iconSizes = {
@@ -18,21 +18,21 @@ const iconSizes = {
18
18
  /**
19
19
  * Labels identify a component or group of components. Use them with elements such as checkboxes and input fields to guide users in providing specific information, or with plain text to organize information.
20
20
  */
21
- const Label = ({ size = "medium", labelText, disabled, required, infoText, isLoading, className, children }) => {
21
+ const Label = ({ size = "medium", labelText, disabled, required, infoText, isLoading, className, children, readOnly }) => {
22
22
  const labelRef = useRef(null);
23
23
  const isTruncated = useEllipsisDetection(labelRef);
24
24
  return (React__default.createElement("label", { className: classNames(`label`, className) },
25
25
  children,
26
- isLoading ? (React__default.createElement("span", null, "skeleton")) : (React__default.createElement("span", { className: "label__container" },
26
+ isLoading ? (React__default.createElement("span", null, "skeleton")) : (labelText && (React__default.createElement("span", { className: classNames("label__container", { label__container_readOnly: readOnly && !disabled }) },
27
27
  React__default.createElement("div", { className: "label__container-inner" },
28
- React__default.createElement(Tooltip, { text: labelText, isVisible: isTruncated },
28
+ labelText && (React__default.createElement(Tooltip, { text: labelText, isVisible: isTruncated },
29
29
  React__default.createElement("span", { ref: labelRef, className: classNames(`ellipsis-text label__text label__text_size_${size}`, {
30
30
  label__text_disabled: disabled
31
- }) }, labelText)),
31
+ }) }, labelText))),
32
32
  required && (React__default.createElement("span", { className: classNames(`label__asterisk label__text_size_${size} `, {
33
33
  label__text_disabled: disabled
34
34
  }) }, "*"))),
35
- infoText && React__default.createElement(Info, { infoText: infoText, disabled: disabled, size: iconSizes[size] })))));
35
+ infoText && React__default.createElement(Info, { infoText: infoText, disabled: disabled, size: iconSizes[size] }))))));
36
36
  };
37
37
 
38
38
  export { Label as default };
package/ProgressBar.js CHANGED
@@ -16,7 +16,7 @@ styleInject(css_248z);
16
16
  const helperTextTypeMap = {
17
17
  default: "rest",
18
18
  success: "rest",
19
- error: "danger"
19
+ error: "error"
20
20
  };
21
21
  const helperTextAndLabelSizeMap = {
22
22
  large: "medium",
package/components/atoms/HelperText/HelperText.d.ts CHANGED
@@ -9,10 +9,10 @@ interface IHelperTextProps {
9
9
  size?: "medium" | "small";
10
10
  /**
11
11
  * Specifies the type of the helper text. <br>
12
- * Possible values: `rest | danger | warning`.
13
- * `rest` for default information, `danger` for error messages, or `warning` for cautions.
12
+ * Possible values: `rest | error | warning`.
13
+ * `rest` for default information, `error` for error messages, or `warning` for cautions.
14
14
  */
15
- type?: "rest" | "danger" | "warning";
15
+ type?: "rest" | "error" | "warning";
16
16
  /**
17
17
  * The actual text content to be displayed as helper text.
18
18
  * This provides guidance or additional information related to the input field.
@@ -20,7 +20,7 @@ interface IHelperTextProps {
20
20
  text: string;
21
21
  /**
22
22
  * Optional. Icon to be displayed alongside the helper text.
23
- * If the `type` prop is set to `danger` or `warning`, a default icon will be used (ErrorAlertFill for `danger` and WarningFill for `warning`) unless an `Icon` is explicitly provided.
23
+ * If the `type` prop is set to `error` or `warning`, a default icon will be used (ErrorAlertFill for `error` and WarningFill for `warning`) unless an `Icon` is explicitly provided.
24
24
  * If `type` is `rest`, the provided `Icon` will be used (if supplied), otherwise no icon will be displayed.
25
25
  * The size of the icon will automatically adjust based on the `size` prop (`small` or `medium`).
26
26
  */
package/components/atoms/Label/Label.d.ts CHANGED
@@ -32,6 +32,11 @@ interface ILabelProps {
32
32
  * When set to `true` a `skeleton` indicator will be shown instead of the `label` text.
33
33
  */
34
34
  isLoading?: boolean;
35
+ /**
36
+ * Indicates whether the `label` should be read-only.
37
+ * This prop will not make visual changes but sets `pointer-events: auto` to prevent triggering label click events.
38
+ */
39
+ readOnly?: boolean;
35
40
  /**
36
41
  * Additional class for the parent element.
37
42
  * This prop should be used to set placement properties for the element relative to its parent using BEM conventions.
package/components/molecules/Checkbox/Checkbox.d.ts ADDED
@@ -0,0 +1,80 @@
1
+ import { ChangeEvent, FC, FocusEvent } from "react";
2
+ import "./Checkbox.scss";
3
+ interface ICheckboxProps {
4
+ /**
5
+ * The text displayed as the label for the checkbox, describing its purpose or function.
6
+ */
7
+ label?: string;
8
+ /**
9
+ * Toggles the label's and HelperText position between above or beside the checkbox.
10
+ */
11
+ vertical?: boolean;
12
+ /**
13
+ * Specifies whether the checkbox is mandatory for completing a form.
14
+ */
15
+ required?: boolean;
16
+ /**
17
+ * Disables the checkbox, preventing it from being interacted with.
18
+ */
19
+ disabled?: boolean;
20
+ /**
21
+ * Displays the checkbox as read-only, where users cannot modify its value.
22
+ */
23
+ readOnly?: boolean;
24
+ /**
25
+ * Activates a visual state indicating partial selection within a checkbox group.
26
+ */
27
+ indeterminate?: boolean;
28
+ /**
29
+ * Manages the checked state of the checkbox in a controlled way.
30
+ */
31
+ checked?: boolean;
32
+ /**
33
+ * Automatically focuses the checkbox when the component mounts.
34
+ */
35
+ autoFocus?: boolean;
36
+ /**
37
+ * Extra information displayed with the label for clarity or guidance.
38
+ */
39
+ infoText?: string;
40
+ /**
41
+ * Helper text to provide context or explain any errors, warnings related to the checkbox.
42
+ */
43
+ helperText?: string;
44
+ /**
45
+ * The initial checked state of the checkbox before user interaction.
46
+ */
47
+ defaultChecked?: boolean;
48
+ /**
49
+ * Determines the checkboxes appearance based on its status.<br>
50
+ * Possible values: `rest | warning | error`
51
+ */
52
+ type?: "rest" | "warning" | "error";
53
+ /**
54
+ * HTML name attribute for the input element.<br>
55
+ * A unique identifier for the checkbox within a form.
56
+ */
57
+ name?: string;
58
+ /**
59
+ * Fires when the user changes the checkbox state. Provides the change event as a callback's argument.
60
+ */
61
+ onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
62
+ /**
63
+ * Event handler for when the checkbox input element loses focus. Provides the focus event as a callback's argument.
64
+ */
65
+ onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
66
+ /**
67
+ * Event handler for when the checkbox input element receives focus. Provides the focus event as a callback's argument.
68
+ */
69
+ onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
70
+ /**
71
+ * Additional class for the parent element.
72
+ * This prop should be used to set placement properties for the element relative to its parent using BEM conventions.
73
+ */
74
+ className?: string;
75
+ }
76
+ /**
77
+ * Checkbox component allows users to select one or more options from a set of choices. Each checkbox can be either checked or unchecked, indicating a binary state. Checkboxes are commonly used in forms, settings, and lists where multiple selections are needed.
78
+ */
79
+ declare const Checkbox: FC<ICheckboxProps>;
80
+ export { ICheckboxProps, Checkbox as default };
package/components/molecules/Checkbox/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { ICheckboxProps, default } from "./Checkbox";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@geneui/components",
3
3
  "description": "The Gene UI components library designed for BI tools",
4
- "version": "3.0.0-next-f0c40b8-25112024",
4
+ "version": "3.0.0-next-65b0240-02122024",
5
5
  "author": "SoftConstruct",
6
6
  "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
7
7
  "repository": {