no-frills-ui 0.0.14-alpha.0 → 0.0.14-alpha.10

package/lib-esm/components/Groups/Group.js

@@ -1,85 +1,40 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import PropTypes from 'prop-types';
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import React, { useId } from 'react';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
-const Container = styled.div `
-    display: inline-flex;
-    border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
-    border-radius: 3px;
-    margin: 5px;
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
-    /* overrides */
-    & button, & label {
-        margin: 0;
-        border: none;
-        border-radius: 0;
-        border-left: 1px solid var(--border-color, ${constants.BORDER_COLOR});
-        box-shadow: none;
-        height: 32px;
-    }
-
-    & > div button {
-        border-left: none;
-    }
-
-    & input, & select {
-        border: none;
-        height: 32px;
-    }
-
-    & input, & select {
-        border-radius: 0;
-    }
-
-    & input:active, & select:active {
-        box-shadow: none;
-    }
-
-    & > div > span {
-        top: 8px;
-    }
-
-    /* Handling for first and last child */
-    & > *:first-child, & > label:first-child input,
-    & > label:first-child select, & > *:first-child label,
-    & > *:first-child input  {
-        border-left: none;
-        border-radius: 2px 0 0  2px;
-    }
-
-    & > *:last-child, & > label:last-child input,
-    & > label:last-child select, & > *:last-child label,
-    & > *:last-child input {
-        border-radius: 0 2px 2px 0;
-    }
-
-    /* focus */
-    & *:focus, & *:focus + span {
-        z-index: 1;
-    }
-
-    &:focus-within, &:hover {
-        box-shadow: var(--hover-shadow, ${constants.HOVER_SHADOW});
-    }
-
-    ${props => props.errorText ? `
-        border-color: var(--error, ${constants.ERROR});
+const Container$3 = /*#__PURE__*/ styled("div", {
+    target: "eqhpibl0",
+    label: "Container"
+})("display:inline-flex;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";border-radius:3px;margin:5px;& button,& label{margin:0;border:none;border-radius:0;border-left:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";box-shadow:none;height:32px;}& > div button{border-left:none;}& input,& select{border:none;height:32px;}& input,& select{border-radius:0;}& input:active,& select:active{box-shadow:none;}& > div > span{top:8px;}& > *:first-child,& > label:first-child input,& > label:first-child select,& > *:first-child label,& > *:first-child input{border-left:none;border-radius:2px 0 0 2px;}& > *:last-child,& > label:last-child input,& > label:last-child select,& > *:last-child label,& > *:last-child input{border-radius:0 2px 2px 0;}& *:focus,& *:focus + span{z-index:1;}&:focus-within,&:hover{box-shadow:", getThemeValue(THEME_NAME.HOVER_SHADOW), ";}", (props)=>props.errorText ? `
+        border-color: ${getThemeValue(THEME_NAME.ERROR)};
 
         & > button, & > label {
-            border-color: var(--error, ${constants.ERROR});
+            border-color: ${getThemeValue(THEME_NAME.ERROR)};
         }
-    ` : ''}
-`;
-const ErrorContainer = styled.div `
-    color: var(--error, ${constants.ERROR});
-    margin-left: 8px;
-    font-size: 12px;
-`;
-export default function Group(props) {
-    return (_jsxs(_Fragment, { children: [_jsx(Container, Object.assign({}, props, { children: props.children })), props.errorText && _jsx(ErrorContainer, { children: props.errorText })] }));
+    ` : '');
+const ErrorContainer = /*#__PURE__*/ styled("div", {
+    target: "eqhpibl1",
+    label: "ErrorContainer"
+})("color:", getThemeValue(THEME_NAME.ERROR), ";margin-left:8px;font-size:12px;");
+function GroupComponent(props, ref) {
+    const errorId = useId();
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Container$3, {
+                ...props,
+                ref: ref,
+                "aria-describedby": props.errorText ? errorId : undefined,
+                children: props.children
+            }),
+            props.errorText && /*#__PURE__*/ jsx(ErrorContainer, {
+                id: errorId,
+                children: props.errorText
+            })
+        ]
+    });
 }
-Group.propTypes = {
-    /** Error Message for the group */
-    errorText: PropTypes.string,
-};
-//# sourceMappingURL=Group.js.map
+const Group = /*#__PURE__*/ React.forwardRef(GroupComponent);
+
+export { Group as default };
+//# sourceMappingURL=Group.js.map

package/lib-esm/components/Groups/Group.js.map

@@ -1 +1 @@
-{"version":3,"file":"Group.js","sourceRoot":"","sources":["../../../src/components/Groups/Group.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAA8C;;4CAE9B,SAAS,CAAC,YAAY;;;;;;;;;qDASb,SAAS,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0CA8CjC,SAAS,CAAC,YAAY;;;MAG1D,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;qCACI,SAAS,CAAC,KAAK;;;yCAGX,SAAS,CAAC,KAAK;;KAEnD,CAAA,CAAC,CAAC,EAAE;CACR,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;0BACP,SAAS,CAAC,KAAK;;;CAGxC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAA4E;IACtG,OAAO,CACH,8BACI,KAAC,SAAS,oBAAK,KAAK,cACf,KAAK,CAAC,QAAQ,IACP,EACV,KAAK,CAAC,SAAS,IAAI,KAAC,cAAc,cAAE,KAAK,CAAC,SAAS,GAAkB,IACxE,CACN,CAAA;AACL,CAAC;AAED,KAAK,CAAC,SAAS,GAAG;IACd,kCAAkC;IAClC,SAAS,EAAE,SAAS,CAAC,MAAM;CAC9B,CAAA"}
+{"version":3,"file":"Group.js","sources":["../../../src/components/Groups/Group.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst Container = styled.div<GroupProps>`\n    display: inline-flex;\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    border-radius: 3px;\n    margin: 5px;\n\n    /* overrides */\n    & button,\n    & label {\n        margin: 0;\n        border: none;\n        border-radius: 0;\n        border-left: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n        box-shadow: none;\n        height: 32px;\n    }\n\n    & > div button {\n        border-left: none;\n    }\n\n    & input,\n    & select {\n        border: none;\n        height: 32px;\n    }\n\n    & input,\n    & select {\n        border-radius: 0;\n    }\n\n    & input:active,\n    & select:active {\n        box-shadow: none;\n    }\n\n    & > div > span {\n        top: 8px;\n    }\n\n    /* Handling for first and last child */\n    & > *:first-child,\n    & > label:first-child input,\n    & > label:first-child select,\n    & > *:first-child label,\n    & > *:first-child input {\n        border-left: none;\n        border-radius: 2px 0 0 2px;\n    }\n\n    & > *:last-child,\n    & > label:last-child input,\n    & > label:last-child select,\n    & > *:last-child label,\n    & > *:last-child input {\n        border-radius: 0 2px 2px 0;\n    }\n\n    /* focus */\n    & *:focus,\n    & *:focus + span {\n        z-index: 1;\n    }\n\n    &:focus-within,\n    &:hover {\n        box-shadow: ${getThemeValue(THEME_NAME.HOVER_SHADOW)};\n    }\n\n    ${(props) =>\n        props.errorText\n            ? `\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n\n        & > button, & > label {\n            border-color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n    `\n            : ''}\n`;\n\nconst ErrorContainer = styled.div`\n    color: ${getThemeValue(THEME_NAME.ERROR)};\n    margin-left: 8px;\n    font-size: 12px;\n`;\n\ntype GroupProps = {\n    /** Error Message for the group */\n    errorText?: string;\n};\n\nfunction GroupComponent(\n    props: React.PropsWithChildren<GroupProps>,\n    ref: React.Ref<HTMLDivElement>,\n) {\n    const errorId = useId();\n\n    return (\n        <>\n            <Container\n                {...props}\n                ref={ref}\n                aria-describedby={props.errorText ? errorId : undefined}\n            >\n                {props.children}\n            </Container>\n            {props.errorText && <ErrorContainer id={errorId}>{props.errorText}</ErrorContainer>}\n        </>\n    );\n}\n\nconst Group = React.forwardRef<HTMLDivElement, GroupProps>(GroupComponent);\nexport default Group;\n"],"names":["Container","styled","getThemeValue","THEME_NAME","BORDER_COLOR","HOVER_SHADOW","props","errorText","ERROR","ErrorContainer","GroupComponent","ref","errorId","useId","_jsxs","_Fragment","_jsx","aria-describedby","undefined","children","id","Group","React","forwardRef"],"mappings":";;;;;AAIA,MAAMA,WAAAA,iBAAYC,MAAAA,CAAAA,KAAAA,EAAAA;;;AAEMC,CAAAA,CAAAA,CAAAA,uCAAAA,EAAAA,aAAAA,CAAcC,WAAWC,YAAY,CAAA,EAAA,4GAAA,EAU5BF,aAAAA,CAAcC,UAAAA,CAAWC,YAAY,CAAA,EAAA,qlBAAA,EAuDhDF,aAAAA,CAAcC,UAAAA,CAAWE,YAAY,SAGrD,CAACC,KAAAA,GACCA,KAAAA,CAAMC,SAAS,GACT;sBACQ,EAAEL,aAAAA,CAAcC,UAAAA,CAAWK,KAAK,CAAA,CAAE;;;0BAG9B,EAAEN,aAAAA,CAAcC,UAAAA,CAAWK,KAAK,CAAA,CAAE;;AAExD,IAAA,CAAC,GACS,EAAA,CAAA;AAGd,MAAMC,cAAAA,iBAAiBR,MAAAA,CAAAA,KAAAA,EAAAA;;;AACVC,CAAAA,CAAAA,CAAAA,QAAAA,EAAAA,aAAAA,CAAcC,WAAWK,KAAK,CAAA,EAAA,kCAAA,CAAA;AAU3C,SAASE,cAAAA,CACLJ,KAA0C,EAC1CK,GAA8B,EAAA;AAE9B,IAAA,MAAMC,OAAAA,GAAUC,KAAAA,EAAAA;IAEhB,qBACIC,IAAA,CAAAC,QAAA,EAAA;;0BACIC,GAAA,CAAChB,WAAAA,EAAAA;AACI,gBAAA,GAAGM,KAAK;gBACTK,GAAAA,EAAKA,GAAAA;gBACLM,kBAAAA,EAAkBX,KAAAA,CAAMC,SAAS,GAAGK,OAAAA,GAAUM,SAAAA;AAE7CZ,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMa;;YAEVb,KAAAA,CAAMC,SAAS,kBAAIS,GAAA,CAACP,cAAAA,EAAAA;gBAAeW,EAAAA,EAAIR,OAAAA;AAAUN,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMC;;;;AAGpE;AAEA,MAAMc,KAAAA,iBAAQC,KAAAA,CAAMC,UAAU,CAA6Bb,cAAAA;;;;"}

package/lib-esm/components/Groups/GroupLabel.js

@@ -1,19 +1,10 @@
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
-export default styled.label `
-    height: 32px;
-    background-color: ${constants.DISABLED_BACKGROUND};
-    padding: 0 4px;
-    line-height: 32px;
-    min-width: 24px;
-    text-align: center;
-    color: ${constants.BORDER_COLOR};
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
-    & > svg {
-        height: 24px;
-        width: 24px;
-        vertical-align: middle;
-        fill: currentColor;
-    }
-`;
-//# sourceMappingURL=GroupLabel.js.map
+var GroupLabel = /*#__PURE__*/ styled("label", {
+    target: "e1kv3eb90",
+    label: ""
+})("height:32px;background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";padding:0 4px;line-height:32px;min-width:24px;text-align:center;color:", getThemeValue(THEME_NAME.BORDER_COLOR), ";& > svg{height:24px;width:24px;vertical-align:middle;fill:currentColor;}");
+
+export { GroupLabel as default };
+//# sourceMappingURL=GroupLabel.js.map

package/lib-esm/components/Groups/GroupLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupLabel.js","sourceRoot":"","sources":["../../../src/components/Groups/GroupLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,eAAe,MAAM,CAAC,KAAK,CAAA;;wBAEH,SAAS,CAAC,mBAAmB;;;;;aAKxC,SAAS,CAAC,YAAY;;;;;;;;CAQlC,CAAC"}
+{"version":3,"file":"GroupLabel.js","sources":["../../../src/components/Groups/GroupLabel.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nexport default styled.label`\n    height: 32px;\n    background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n    padding: 0 4px;\n    line-height: 32px;\n    min-width: 24px;\n    text-align: center;\n    color: ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n\n    & > svg {\n        height: 24px;\n        width: 24px;\n        vertical-align: middle;\n        fill: currentColor;\n    }\n`;\n"],"names":["styled","getThemeValue","THEME_NAME","DISABLED_BACKGROUND","BORDER_COLOR"],"mappings":";;;AAGA,iBAAA,cAAeA,MAAAA,CAAAA,OAAAA,EAAAA;;;AAESC,CAAAA,CAAAA,CAAAA,+BAAAA,EAAAA,aAAAA,CAAcC,WAAWC,mBAAmB,CAAA,EAAA,yEAAA,EAKvDF,aAAAA,CAAcC,UAAAA,CAAWE,YAAY,CAAA,EAAA,2EAAA,CAAA;;;;"}

package/lib-esm/components/Input/Checkbox.d.ts

@@ -1,17 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-type CheckboxProps = Omit<React.HTMLProps<HTMLInputElement>, 'as'> & PropTypes.InferProps<typeof Checkbox.propTypes>;
-declare function Checkbox(props: CheckboxProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare namespace Checkbox {
-    var propTypes: {
-        /** Label for the field */
-        label: PropTypes.Requireable<string>;
-        /** If the field is in indeterminate state */
-        indeterminate: PropTypes.Requireable<boolean>;
-    };
-    var defaultProps: {
-        indeterminate: boolean;
-        label: string;
-    };
-}
+declare const Checkbox: React.ForwardRefExoticComponent<{
+    /**
+     * Label for the field
+     * @default ''
+     */
+    label?: string;
+    /**
+     * If the field is in indeterminate state
+     * @default false
+     */
+    indeterminate?: boolean;
+} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

package/lib-esm/components/Input/Checkbox.js

@@ -1,121 +1,54 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useCallback } from 'react';
-import PropTypes from 'prop-types';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import React, { useCallback } from 'react';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
-const Label = styled.label `
-    margin: 5px 0;
-    position: relative;
-`;
-const Input = styled.input `
-    appearance: none;
-    position: relative;
-    margin: 0;
-
-    &::before {
-        content: '';
-        width: 16px;
-        height: 16px;
-        border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
-        display: inline-block;
-        border-radius: 3px;
-        vertical-align: bottom;
-        margin: 0 5px;
-        text-align: center;
-        line-height: 16px;
-        background-color: var(--background, ${constants.BACKGROUND});
-        transition: background-color .3s ease;
-    }
-
-    &::after {
-        content: '';
-        width: 3px;
-        height: 10px;
-        border-right: 2px solid #fff;
-        border-bottom: 2px solid #fff;
-        transform: translate(-16px, 1px);
-        opacity: 0;
-        transition: transform .3s ease;
-        position: absolute;
-    }
-
-    /** checked */
-    &:checked::before {
-        content: '';
-        background-color: var(--primary, ${constants.PRIMARY});
-        border-color: var(--primary, ${constants.PRIMARY});
-        color: #fff;
-    }
-
-    &:checked::after {
-        opacity: 1;
-        transform: translate(-16px, 2px) rotate(45deg);
-    }
-
-    /** indeterminate */
-    &:indeterminate::before {
-        content: '';
-        background-color: var(--primary, ${constants.PRIMARY});
-        border-color: var(--primary, ${constants});
-        color: #fff;
-    }
-
-    &:indeterminate::after {
-        width: 0;
-        opacity: 1;
-        transform: translate(-15px, 3px) rotate(90deg);
-    }
-
-    /** active and focus */
-    &:enabled:active::before, &:focus::before {
-        border-color: var(--primary, ${constants.PRIMARY});
-        box-shadow: 0 0 0 3px var(--primary, ${constants.PRIMARY_LIGHT}); 
-    }
-
-    &:enabled:active + span, &:focus + span {
-        color: var(--primary, ${constants.PRIMARY});
-    }
-
-    /** hover */
-    &:enabled:hover::before {
-        border-color: var(--primary, ${constants.PRIMARY});
-    }
-
-    &:enabled:hover + span {
-        color: var(--primary, ${constants.PRIMARY});
-    }
-
-    /** disabled */
-    &:disabled::before {
-        border-color: #aaa;
-    }
-
-    &:disabled + span {
-        color: #aaa;
-    }
-
-    &:checked:disabled::before, &:indeterminate:disabled::before {
-        background-color: #aaa;
-    }
-`;
-export default function Checkbox(props) {
-    const ref = useCallback((node) => {
-        if (node !== null) {
-            if (props.indeterminate) {
-                node.indeterminate = true;
-            }
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
+
+const Label$2 = /*#__PURE__*/ styled("label", {
+    target: "e11g7h820",
+    label: "Label"
+})("margin:5px 0;position:relative;display:inline-flex;align-items:center;cursor:pointer;");
+const StyledCheckmark = /*#__PURE__*/ styled("span", {
+    target: "e11g7h821",
+    label: "StyledCheckmark"
+})("width:16px;height:16px;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";display:inline-block;border-radius:3px;margin-right:5px;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";transition:all 0.3s ease;position:relative;flex-shrink:0;&::after{content:'';width:3px;height:10px;border-right:2px solid ", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";border-bottom:2px solid ", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";position:absolute;top:1px;left:6px;opacity:0;transform:rotate(45deg) scale(0);transition:all 0.2s ease;}");
+const HiddenInput$1 = /*#__PURE__*/ styled("input", {
+    target: "e11g7h822",
+    label: "HiddenInput"
+})("opacity:0;width:0;height:0;position:absolute;margin:0;&:checked + ", StyledCheckmark, "{background-color:", getThemeValue(THEME_NAME.PRIMARY), ";border-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:checked + ", StyledCheckmark, "::after{opacity:1;transform:rotate(45deg) scale(1);}&:indeterminate + ", StyledCheckmark, "{background-color:", getThemeValue(THEME_NAME.PRIMARY), ";border-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:indeterminate + ", StyledCheckmark, "::after{opacity:1;height:0;width:8px;border-right:none;border-bottom:2px solid ", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";transform:rotate(0deg) scale(1);top:7px;left:4px;}&:enabled:active + ", StyledCheckmark, ",&:focus + ", StyledCheckmark, "{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 3px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:enabled:active ~ span,&:focus ~ span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:enabled:hover + ", StyledCheckmark, "{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:enabled:hover ~ span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:disabled + ", StyledCheckmark, "{border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";cursor:not-allowed;}&:disabled ~ span{color:", getThemeValue(THEME_NAME.DISABLED), ";cursor:not-allowed;}&:checked:disabled + ", StyledCheckmark, ",&:indeterminate:disabled + ", StyledCheckmark, "{background-color:", getThemeValue(THEME_NAME.DISABLED), ";}");
+function CheckboxComponent(props, fwdRef) {
+    const { label = '', indeterminate = false, checked, ...rest } = props;
+    const ref = useCallback((node)=>{
+        // Ensure the DOM `indeterminate` flag always matches the prop
+        if (node) {
+            node.indeterminate = !!indeterminate;
+        }
+        // Forward the node (or null) to the parent ref (supports function or ref object)
+        if (typeof fwdRef === 'function') {
+            fwdRef(node);
+        } else if (fwdRef) {
+            fwdRef.current = node;
         }
-    }, []);
-    return (_jsxs(Label, { children: [_jsx(Input, Object.assign({}, props, { ref: ref, type: "checkbox" })), _jsx("span", { children: props.label })] }));
+    }, [
+        indeterminate,
+        fwdRef
+    ]);
+    return /*#__PURE__*/ jsxs(Label$2, {
+        children: [
+            /*#__PURE__*/ jsx(HiddenInput$1, {
+                ...rest,
+                ref: ref,
+                type: "checkbox",
+                checked: checked,
+                "aria-checked": indeterminate ? 'mixed' : checked
+            }),
+            /*#__PURE__*/ jsx(StyledCheckmark, {}),
+            /*#__PURE__*/ jsx("span", {
+                children: label
+            })
+        ]
+    });
 }
-Checkbox.propTypes = {
-    /** Label for the field */
-    label: PropTypes.string,
-    /** If the field is in indeterminate state */
-    indeterminate: PropTypes.bool,
-};
-Checkbox.defaultProps = {
-    indeterminate: false,
-    label: ''
-};
-//# sourceMappingURL=Checkbox.js.map
+const Checkbox = /*#__PURE__*/ React.forwardRef(CheckboxComponent);
+
+export { Checkbox as default };
+//# sourceMappingURL=Checkbox.js.map

package/lib-esm/components/Input/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Input/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;;;CAGzB,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;;gDASsB,SAAS,CAAC,YAAY;;;;;;;8CAOxB,SAAS,CAAC,UAAU;;;;;;;;;;;;;;;;;;;2CAmBvB,SAAS,CAAC,OAAO;uCACrB,SAAS,CAAC,OAAO;;;;;;;;;;;;2CAYb,SAAS,CAAC,OAAO;uCACrB,SAAS;;;;;;;;;;;;uCAYT,SAAS,CAAC,OAAO;+CACT,SAAS,CAAC,aAAa;;;;gCAItC,SAAS,CAAC,OAAO;;;;;uCAKV,SAAS,CAAC,OAAO;;;;gCAIxB,SAAS,CAAC,OAAO;;;;;;;;;;;;;;;CAehD,CAAC;AAIF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAoB;IACjD,MAAM,GAAG,GAAG,WAAW,CAAC,CAAC,IAAS,EAAE,EAAE;QAClC,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;YAChB,IAAI,KAAK,CAAC,aAAa,EAAE,CAAC;gBACtB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAC9B,CAAC;QACL,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH,MAAC,KAAK,eACF,KAAC,KAAK,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,UAAU,IAAG,EAC9C,yBAAO,KAAK,CAAC,KAAK,GAAQ,IACtB,CACX,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,SAAS,GAAG;IACjB,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC,MAAM;IACvB,6CAA6C;IAC7C,aAAa,EAAE,SAAS,CAAC,IAAI;CAChC,CAAA;AAED,QAAQ,CAAC,YAAY,GAAG;IACpB,aAAa,EAAE,KAAK;IACpB,KAAK,EAAE,EAAE;CACZ,CAAA"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Input/Checkbox.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst Label = styled.label`\n    margin: 5px 0;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n`;\n\nconst StyledCheckmark = styled.span`\n    width: 16px;\n    height: 16px;\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    display: inline-block;\n    border-radius: 3px;\n    margin-right: 5px;\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    transition: all 0.3s ease;\n    position: relative;\n    flex-shrink: 0;\n\n    &::after {\n        content: '';\n        width: 3px;\n        height: 10px;\n        border-right: 2px solid ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n        border-bottom: 2px solid ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n        position: absolute;\n        top: 1px;\n        left: 6px;\n        opacity: 0;\n        transform: rotate(45deg) scale(0);\n        transition: all 0.2s ease;\n    }\n`;\n\nconst HiddenInput = styled.input`\n    opacity: 0;\n    width: 0;\n    height: 0;\n    position: absolute;\n    margin: 0;\n\n    /** checked */\n    &:checked + ${StyledCheckmark} {\n        background-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    &:checked + ${StyledCheckmark}::after {\n        opacity: 1;\n        transform: rotate(45deg) scale(1);\n    }\n\n    /** indeterminate */\n    &:indeterminate + ${StyledCheckmark} {\n        background-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    &:indeterminate + ${StyledCheckmark}::after {\n        opacity: 1;\n        height: 0;\n        width: 8px;\n        border-right: none;\n        border-bottom: 2px solid ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n        transform: rotate(0deg) scale(1);\n        top: 7px;\n        left: 4px;\n    }\n\n    /** active and focus */\n    &:enabled:active + ${StyledCheckmark}, &:focus + ${StyledCheckmark} {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        box-shadow: 0 0 0 3px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:enabled:active ~ span,\n    &:focus ~ span {\n        color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    /** hover */\n    &:enabled:hover + ${StyledCheckmark} {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    &:enabled:hover ~ span {\n        color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    /** disabled */\n    &:disabled + ${StyledCheckmark} {\n        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n        cursor: not-allowed;\n    }\n\n    &:disabled ~ span {\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n        cursor: not-allowed;\n    }\n\n    &:checked:disabled + ${StyledCheckmark}, &:indeterminate:disabled + ${StyledCheckmark} {\n        background-color: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n`;\n\ntype CheckboxProps = {\n    /**\n     * Label for the field\n     * @default ''\n     */\n    label?: string;\n    /**\n     * If the field is in indeterminate state\n     * @default false\n     */\n    indeterminate?: boolean;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nfunction CheckboxComponent(props: CheckboxProps, fwdRef: React.Ref<HTMLInputElement>) {\n    const { label = '', indeterminate = false, checked, ...rest } = props;\n\n    const ref = useCallback(\n        (node: HTMLInputElement | null) => {\n            // Ensure the DOM `indeterminate` flag always matches the prop\n            if (node) {\n                node.indeterminate = !!indeterminate;\n            }\n\n            // Forward the node (or null) to the parent ref (supports function or ref object)\n            if (typeof fwdRef === 'function') {\n                fwdRef(node);\n            } else if (fwdRef) {\n                (fwdRef as React.MutableRefObject<HTMLInputElement | null>).current = node;\n            }\n        },\n        [indeterminate, fwdRef],\n    );\n\n    return (\n        <Label>\n            <HiddenInput\n                {...rest}\n                ref={ref}\n                type=\"checkbox\"\n                checked={checked}\n                aria-checked={indeterminate ? 'mixed' : checked}\n            />\n            <StyledCheckmark />\n            <span>{label}</span>\n        </Label>\n    );\n}\n\nconst Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(CheckboxComponent);\n\nexport default Checkbox;\n"],"names":["Label","styled","StyledCheckmark","getThemeValue","THEME_NAME","BORDER_COLOR","BACKGROUND","TEXT_COLOR_LIGHT","HiddenInput","PRIMARY","PRIMARY_LIGHT","DISABLED_BORDER","DISABLED","CheckboxComponent","props","fwdRef","label","indeterminate","checked","rest","ref","useCallback","node","current","_jsxs","_jsx","type","aria-checked","span","Checkbox","React","forwardRef"],"mappings":"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"}

package/lib-esm/components/Input/Dropdown.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
-type DropdownProps<T> = {
+declare const Dropdown: React.ForwardRefExoticComponent<{
     /** Value of the control */
-    value?: T | T[];
-    /** If multiple elements can be selected */
-    multiSelect: boolean;
+    value?: object | object[] | undefined;
+    /**
+     * If multiple elements can be selected
+     * @default false
+     */
+    multiSelect?: boolean;
     /** Change handler */
-    onChange?: (v: T | T[]) => void;
+    onChange?: ((v: object | object[]) => void) | undefined;
     /** Label of the control */
     label?: string;
     /** Error message */
@@ -14,11 +17,7 @@ type DropdownProps<T> = {
     required?: boolean;
     /** Disables the field */
     disabled?: boolean;
-} & React.PropsWithChildren<{}>;
-declare function Dropdown<T>(props: DropdownProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
-declare namespace Dropdown {
-    var defaultProps: {
-        multiSelect: boolean;
-    };
-}
+} & {
+    children?: React.ReactNode | undefined;
+} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
 export default Dropdown;