@heathmont/moon-core-tw - npm Package Compare versions

Comparing version 8.8.0 to 8.9.0

lib/button/private/buttonSizes/buttonSizes.js

@@ -15,15 +15,15 @@ "use strict";
     if (size === Size_1.default.XSMALL) {
-        return classnames_1.default(xSmallPadding_1.default({ icon, iconLeft, iconRight, iconOnly }), 'gap-1 text-xs rounded-moon-xs');
+        return classnames_1.default(xSmallPadding_1.default({ icon, iconLeft, iconRight, iconOnly }), 'gap-1 text-xs rounded-moon-i-xs');
     }
     if (size === Size_1.default.SMALL) {
-        return classnames_1.default(smallPadding_1.default({ icon, iconLeft, iconRight, iconOnly }), 'gap-1 text-sm rounded-moon-sm');
+        return classnames_1.default(smallPadding_1.default({ icon, iconLeft, iconRight, iconOnly }), 'gap-1 text-sm rounded-moon-i-sm');
     }
     if (size === Size_1.default.MEDIUM) {
-        return classnames_1.default(mediumPadding_1.default({ icon, iconLeft, iconRight, iconOnly }), 'gap-2 text-sm rounded-moon-sm');
+        return classnames_1.default(mediumPadding_1.default({ icon, iconLeft, iconRight, iconOnly }), 'gap-2 text-sm rounded-moon-i-sm');
     }
     if (size === Size_1.default.LARGE) {
-        return classnames_1.default(largePadding_1.default({ icon, iconLeft, iconRight, iconOnly }), 'gap-2 text-base rounded-moon-sm');
+        return classnames_1.default(largePadding_1.default({ icon, iconLeft, iconRight, iconOnly }), 'gap-2 text-base rounded-moon-i-sm');
     }
     if (size === Size_1.default.XLARGE) {
-        return classnames_1.default(xLargePadding_1.default({ icon, iconLeft, iconRight, iconOnly }), 'gap-2 text-base rounded-moon-md');
+        return classnames_1.default(xLargePadding_1.default({ icon, iconLeft, iconRight, iconOnly }), 'gap-2 text-base rounded-moon-i-md');
     }
@@ -30,0 +30,0 @@ return '';

lib/checkbox/Checkbox.js

@@ -52,7 +52,7 @@ "use strict";
     return (react_1.default.createElement("span", { className: classnames_1.default('w-8 h-8 rounded-full transition duration-200 absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%] scale-0 opacity-30', prevChecked !== checked
-            ? 'animate-[explode_0.7s_cubic-bezier(0.7,0.7,0.7,1)_1] rounded-moon-xs'
+            ? 'animate-[explode_0.7s_cubic-bezier(0.7,0.7,0.7,1)_1] rounded-moon-i-xs'
             : '', checked ? 'bg-piccolo/[.12]' : 'bg-bulma/[.12]') }));
 };
 const Checkbox = react_1.forwardRef((_a, ref) => {
-    var { disabled, readOnly, ariaLabel, label, id, checked } = _a, inputProps = __rest(_a, ["disabled", "readOnly", "ariaLabel", "label", "id", "checked"]);
+    var { disabled, readOnly, ariaLabel, label, id, checked, onChange } = _a, inputProps = __rest(_a, ["disabled", "readOnly", "ariaLabel", "label", "id", "checked", "onChange"]);
     const [isChecked, setIsChecked] = react_1.useState(checked || false);
@@ -65,3 +65,3 @@ const [isHover, setIsHover] = react_1.useState(false);
             react_1.default.createElement("span", { className: classnames_1.default('me-2 relative block') },
-                react_1.default.createElement("span", { className: classnames_1.default('w-6 h-6 rounded-moon-xs transition duration-200 absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%] transition-[background-color]', isChecked ? 'hover:bg-piccolo/[.12]' : 'hover:bg-trunks/[.12]', !disabled &&
+                react_1.default.createElement("span", { className: classnames_1.default('w-6 h-6 rounded-moon-i-xs transition duration-200 absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%] transition-[background-color]', isChecked ? 'hover:bg-piccolo/[.12]' : 'hover:bg-trunks/[.12]', !disabled &&
                         !readOnly &&
@@ -75,3 +75,3 @@ isHover &&
                         'bg-trunks/[.12]') }),
-                react_1.default.createElement("input", Object.assign({ id: id, disabled: disabled, readOnly: readOnly, "aria-label": ariaLabel, ref: ref, checked: isChecked, className: classnames_1.default('appearance-none h-4 w-4 rounded-moon-xs focus:outline-none transition duration-200 align-top bg-no-repeat bg-center bg-contain float-start cursor-pointer', isChecked
+                react_1.default.createElement("input", Object.assign({ id: id, disabled: disabled, readOnly: readOnly, "aria-label": ariaLabel, ref: ref, checked: isChecked, className: classnames_1.default('appearance-none h-4 w-4 rounded-moon-i-xs focus:outline-none transition duration-200 align-top bg-no-repeat bg-center bg-contain float-start cursor-pointer', isChecked
                         ? 'bg-piccolo shadow-none'
@@ -88,5 +88,5 @@ : 'shadow-[0_0_0_1px_inset] shadow-trunks', disabled && 'opacity-25 cursor-not-allowed select-none', readOnly && 'cursor-not-allowed select-none') }, inputProps, { style: { backgroundImage: isChecked ? markIcon : '' }, type: "checkbox", onClick: (e) => {
                         setIsChecked((_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.checked);
-                    } }))),
+                    }, onChange: onChange ? onChange : (e) => { } }))),
             label)));
 });
 exports.default = Checkbox;

lib/chip/Chip.js

@@ -46,3 +46,3 @@ "use strict";
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("button", Object.assign({ className: classnames_1.default('z-0 overflow-hidden flex flex-row items-center text-sm relative rounded-moon-sm cursor-pointer ease-in-out duration-75', iconOnly ? 'center' : 'space-between', size == 'small' ? 'h-8 gap-1' : 'h-10 gap-2', determinePadding(size, iconLeft, iconRight, iconOnly), isActive ? 'bg-piccolo/[.12] text-piccolo' : 'bg-gohan text-bulma', isStroke && 'hover:shadow-interactive', isActive && isStroke && 'shadow-interactive', 'hover:bg-piccolo/[.12] hover:text-piccolo') }, rest),
+        react_1.default.createElement("button", Object.assign({ className: classnames_1.default('z-0 overflow-hidden flex flex-row items-center text-sm relative rounded-moon-i-sm cursor-pointer ease-in-out duration-75', iconOnly ? 'center' : 'space-between', size == 'small' ? 'h-8 gap-1' : 'h-10 gap-2', determinePadding(size, iconLeft, iconRight, iconOnly), isActive ? 'bg-piccolo/[.12] text-piccolo' : 'bg-gohan text-bulma', isStroke && 'hover:shadow-interactive', isActive && isStroke && 'shadow-interactive', 'hover:bg-piccolo/[.12] hover:text-piccolo') }, rest),
             iconLeft,
@@ -49,0 +49,0 @@ children,

lib/es/button/private/buttonSizes/buttonSizes.js

@@ -10,15 +10,15 @@ import Size from '../../../private/enums/Size';
     if (size === Size.XSMALL) {
-        return classNames(xSmallPadding({ icon, iconLeft, iconRight, iconOnly }), 'gap-1 text-xs rounded-moon-xs');
+        return classNames(xSmallPadding({ icon, iconLeft, iconRight, iconOnly }), 'gap-1 text-xs rounded-moon-i-xs');
     }
     if (size === Size.SMALL) {
-        return classNames(smallPadding({ icon, iconLeft, iconRight, iconOnly }), 'gap-1 text-sm rounded-moon-sm');
+        return classNames(smallPadding({ icon, iconLeft, iconRight, iconOnly }), 'gap-1 text-sm rounded-moon-i-sm');
     }
     if (size === Size.MEDIUM) {
-        return classNames(mediumPadding({ icon, iconLeft, iconRight, iconOnly }), 'gap-2 text-sm rounded-moon-sm');
+        return classNames(mediumPadding({ icon, iconLeft, iconRight, iconOnly }), 'gap-2 text-sm rounded-moon-i-sm');
     }
     if (size === Size.LARGE) {
-        return classNames(largePadding({ icon, iconLeft, iconRight, iconOnly }), 'gap-2 text-base rounded-moon-sm');
+        return classNames(largePadding({ icon, iconLeft, iconRight, iconOnly }), 'gap-2 text-base rounded-moon-i-sm');
     }
     if (size === Size.XLARGE) {
-        return classNames(xLargePadding({ icon, iconLeft, iconRight, iconOnly }), 'gap-2 text-base rounded-moon-md');
+        return classNames(xLargePadding({ icon, iconLeft, iconRight, iconOnly }), 'gap-2 text-base rounded-moon-i-md');
     }
@@ -25,0 +25,0 @@ return '';

lib/es/checkbox/Checkbox.js

@@ -28,7 +28,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return (React.createElement("span", { className: classNames('w-8 h-8 rounded-full transition duration-200 absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%] scale-0 opacity-30', prevChecked !== checked
-            ? 'animate-[explode_0.7s_cubic-bezier(0.7,0.7,0.7,1)_1] rounded-moon-xs'
+            ? 'animate-[explode_0.7s_cubic-bezier(0.7,0.7,0.7,1)_1] rounded-moon-i-xs'
             : '', checked ? 'bg-piccolo/[.12]' : 'bg-bulma/[.12]') }));
 };
 const Checkbox = forwardRef((_a, ref) => {
-    var { disabled, readOnly, ariaLabel, label, id, checked } = _a, inputProps = __rest(_a, ["disabled", "readOnly", "ariaLabel", "label", "id", "checked"]);
+    var { disabled, readOnly, ariaLabel, label, id, checked, onChange } = _a, inputProps = __rest(_a, ["disabled", "readOnly", "ariaLabel", "label", "id", "checked", "onChange"]);
     const [isChecked, setIsChecked] = useState(checked || false);
@@ -41,3 +41,3 @@ const [isHover, setIsHover] = useState(false);
             React.createElement("span", { className: classNames('me-2 relative block') },
-                React.createElement("span", { className: classNames('w-6 h-6 rounded-moon-xs transition duration-200 absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%] transition-[background-color]', isChecked ? 'hover:bg-piccolo/[.12]' : 'hover:bg-trunks/[.12]', !disabled &&
+                React.createElement("span", { className: classNames('w-6 h-6 rounded-moon-i-xs transition duration-200 absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%] transition-[background-color]', isChecked ? 'hover:bg-piccolo/[.12]' : 'hover:bg-trunks/[.12]', !disabled &&
                         !readOnly &&
@@ -51,3 +51,3 @@ isHover &&
                         'bg-trunks/[.12]') }),
-                React.createElement("input", Object.assign({ id: id, disabled: disabled, readOnly: readOnly, "aria-label": ariaLabel, ref: ref, checked: isChecked, className: classNames('appearance-none h-4 w-4 rounded-moon-xs focus:outline-none transition duration-200 align-top bg-no-repeat bg-center bg-contain float-start cursor-pointer', isChecked
+                React.createElement("input", Object.assign({ id: id, disabled: disabled, readOnly: readOnly, "aria-label": ariaLabel, ref: ref, checked: isChecked, className: classNames('appearance-none h-4 w-4 rounded-moon-i-xs focus:outline-none transition duration-200 align-top bg-no-repeat bg-center bg-contain float-start cursor-pointer', isChecked
                         ? 'bg-piccolo shadow-none'
@@ -64,5 +64,5 @@ : 'shadow-[0_0_0_1px_inset] shadow-trunks', disabled && 'opacity-25 cursor-not-allowed select-none', readOnly && 'cursor-not-allowed select-none') }, inputProps, { style: { backgroundImage: isChecked ? markIcon : '' }, type: "checkbox", onClick: (e) => {
                         setIsChecked((_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.checked);
-                    } }))),
+                    }, onChange: onChange ? onChange : (e) => { } }))),
             label)));
 });
 export default Checkbox;

lib/es/chip/Chip.js

@@ -41,3 +41,3 @@ var __rest = (this && this.__rest) || function (s, e) {
     return (React.createElement(React.Fragment, null,
-        React.createElement("button", Object.assign({ className: classNames('z-0 overflow-hidden flex flex-row items-center text-sm relative rounded-moon-sm cursor-pointer ease-in-out duration-75', iconOnly ? 'center' : 'space-between', size == 'small' ? 'h-8 gap-1' : 'h-10 gap-2', determinePadding(size, iconLeft, iconRight, iconOnly), isActive ? 'bg-piccolo/[.12] text-piccolo' : 'bg-gohan text-bulma', isStroke && 'hover:shadow-interactive', isActive && isStroke && 'shadow-interactive', 'hover:bg-piccolo/[.12] hover:text-piccolo') }, rest),
+        React.createElement("button", Object.assign({ className: classNames('z-0 overflow-hidden flex flex-row items-center text-sm relative rounded-moon-i-sm cursor-pointer ease-in-out duration-75', iconOnly ? 'center' : 'space-between', size == 'small' ? 'h-8 gap-1' : 'h-10 gap-2', determinePadding(size, iconLeft, iconRight, iconOnly), isActive ? 'bg-piccolo/[.12] text-piccolo' : 'bg-gohan text-bulma', isStroke && 'hover:shadow-interactive', isActive && isStroke && 'shadow-interactive', 'hover:bg-piccolo/[.12] hover:text-piccolo') }, rest),
             iconLeft,
@@ -44,0 +44,0 @@ children,

lib/es/private/presets/ds-moon-preset.d.ts

@@ -6,8 +6,64 @@ export namespace theme {
         }
+        const fontSize: {
+            'moon-9': (string | {
+                lineHeight: string;
+            })[];
+            'moon-9-caption': (string | {
+                lineHeight: string;
+                letterSpacing: string;
+            })[];
+            'moon-10': (string | {
+                lineHeight: string;
+            })[];
+            'moon-10-caption': (string | {
+                lineHeight: string;
+                letterSpacing: string;
+            })[];
+            'moon-12': (string | {
+                lineHeight: string;
+            })[];
+            'moon-14': (string | {
+                lineHeight: string;
+            })[];
+            'moon-16': (string | {
+                lineHeight: string;
+            })[];
+            'moon-18': (string | {
+                lineHeight: string;
+            })[];
+            'moon-20': (string | {
+                lineHeight: string;
+            })[];
+            'moon-24': (string | {
+                lineHeight: string;
+            })[];
+            'moon-32': (string | {
+                lineHeight: string;
+                letterSpacing: string;
+            })[];
+            'moon-48': (string | {
+                lineHeight: string;
+                letterSpacing: string;
+            })[];
+            'moon-56': (string | {
+                lineHeight: string;
+                letterSpacing: string;
+            })[];
+            'moon-64': (string | {
+                lineHeight: string;
+                letterSpacing: string;
+            })[];
+            'moon-72': (string | {
+                lineHeight: string;
+                letterSpacing: string;
+            })[];
+        };
         const borderRadius: {
-            'moon-xs': string;
-            'moon-sm': string;
-            'moon-md': string;
-            'moon-lg': string;
-            'moon-full': string;
+            'moon-i-xs': string;
+            'moon-i-sm': string;
+            'moon-i-md': string;
+            'moon-s-xs': string;
+            'moon-s-sm': string;
+            'moon-s-md': string;
+            'moon-s-lg': string;
         };
@@ -14,0 +70,0 @@ const zIndex: {

lib/es/private/presets/ds-moon-preset.js

@@ -18,8 +18,109 @@ "use strict";
             },
+            fontSize: {
+                'moon-9': [
+                    '0.5625rem',
+                    {
+                        lineHeight: '1rem',
+                    },
+                ],
+                'moon-9-caption': [
+                    '0.5625rem',
+                    {
+                        lineHeight: '1rem',
+                        letterSpacing: '0.0625rem',
+                    },
+                ],
+                'moon-10': [
+                    '0.625rem',
+                    {
+                        lineHeight: '1rem',
+                    },
+                ],
+                'moon-10-caption': [
+                    '0.625rem',
+                    {
+                        lineHeight: '1rem',
+                        letterSpacing: '0.0313rem',
+                    },
+                ],
+                'moon-12': [
+                    '0.75rem',
+                    {
+                        lineHeight: '1rem',
+                    },
+                ],
+                'moon-14': [
+                    '0.875rem',
+                    {
+                        lineHeight: '1.5rem',
+                    },
+                ],
+                'moon-16': [
+                    '1rem',
+                    {
+                        lineHeight: '1.5rem',
+                    },
+                ],
+                'moon-18': [
+                    '1.125rem',
+                    {
+                        lineHeight: '1.5rem',
+                    },
+                ],
+                'moon-20': [
+                    '1.25rem',
+                    {
+                        lineHeight: '2rem',
+                    },
+                ],
+                'moon-24': [
+                    '1.5rem',
+                    {
+                        lineHeight: '2rem',
+                    },
+                ],
+                'moon-32': [
+                    '2rem',
+                    {
+                        lineHeight: '2.5rem',
+                        letterSpacing: '-0.0313rem',
+                    },
+                ],
+                'moon-48': [
+                    '3rem',
+                    {
+                        lineHeight: '3.5rem',
+                        letterSpacing: '-0.0625rem',
+                    },
+                ],
+                'moon-56': [
+                    '3.5rem',
+                    {
+                        lineHeight: '4rem',
+                        letterSpacing: '-0.0938rem',
+                    },
+                ],
+                'moon-64': [
+                    '4rem',
+                    {
+                        lineHeight: '4.5rem',
+                        letterSpacing: '-0.125rem',
+                    },
+                ],
+                'moon-72': [
+                    '4.5rem',
+                    {
+                        lineHeight: '4.75rem',
+                        letterSpacing: '-0.1563rem',
+                    },
+                ],
+            },
             borderRadius: {
-                'moon-xs': 'var(--radius-xs)',
-                'moon-sm': 'var(--radius-sm)',
-                'moon-md': 'var(--radius-md)',
-                'moon-lg': 'var(--radius-lg)',
-                'moon-full': 'var(--radius-full)',
+                'moon-i-xs': 'var(--radius-i-xs)',
+                'moon-i-sm': 'var(--radius-i-sm)',
+                'moon-i-md': 'var(--radius-i-md)',
+                'moon-s-xs': 'var(--radius-s-xs)',
+                'moon-s-sm': 'var(--radius-s-sm)',
+                'moon-s-md': 'var(--radius-s-md)',
+                'moon-s-lg': 'var(--radius-s-lg)',
             },
@@ -26,0 +127,0 @@ zIndex: {

lib/private/presets/ds-moon-preset.d.ts

@@ -6,8 +6,64 @@ export namespace theme {
         }
+        const fontSize: {
+            'moon-9': (string | {
+                lineHeight: string;
+            })[];
+            'moon-9-caption': (string | {
+                lineHeight: string;
+                letterSpacing: string;
+            })[];
+            'moon-10': (string | {
+                lineHeight: string;
+            })[];
+            'moon-10-caption': (string | {
+                lineHeight: string;
+                letterSpacing: string;
+            })[];
+            'moon-12': (string | {
+                lineHeight: string;
+            })[];
+            'moon-14': (string | {
+                lineHeight: string;
+            })[];
+            'moon-16': (string | {
+                lineHeight: string;
+            })[];
+            'moon-18': (string | {
+                lineHeight: string;
+            })[];
+            'moon-20': (string | {
+                lineHeight: string;
+            })[];
+            'moon-24': (string | {
+                lineHeight: string;
+            })[];
+            'moon-32': (string | {
+                lineHeight: string;
+                letterSpacing: string;
+            })[];
+            'moon-48': (string | {
+                lineHeight: string;
+                letterSpacing: string;
+            })[];
+            'moon-56': (string | {
+                lineHeight: string;
+                letterSpacing: string;
+            })[];
+            'moon-64': (string | {
+                lineHeight: string;
+                letterSpacing: string;
+            })[];
+            'moon-72': (string | {
+                lineHeight: string;
+                letterSpacing: string;
+            })[];
+        };
         const borderRadius: {
-            'moon-xs': string;
-            'moon-sm': string;
-            'moon-md': string;
-            'moon-lg': string;
-            'moon-full': string;
+            'moon-i-xs': string;
+            'moon-i-sm': string;
+            'moon-i-md': string;
+            'moon-s-xs': string;
+            'moon-s-sm': string;
+            'moon-s-md': string;
+            'moon-s-lg': string;
         };
@@ -14,0 +70,0 @@ const zIndex: {

lib/private/presets/ds-moon-preset.js

@@ -18,8 +18,109 @@ "use strict";
             },
+            fontSize: {
+                'moon-9': [
+                    '0.5625rem',
+                    {
+                        lineHeight: '1rem',
+                    },
+                ],
+                'moon-9-caption': [
+                    '0.5625rem',
+                    {
+                        lineHeight: '1rem',
+                        letterSpacing: '0.0625rem',
+                    },
+                ],
+                'moon-10': [
+                    '0.625rem',
+                    {
+                        lineHeight: '1rem',
+                    },
+                ],
+                'moon-10-caption': [
+                    '0.625rem',
+                    {
+                        lineHeight: '1rem',
+                        letterSpacing: '0.0313rem',
+                    },
+                ],
+                'moon-12': [
+                    '0.75rem',
+                    {
+                        lineHeight: '1rem',
+                    },
+                ],
+                'moon-14': [
+                    '0.875rem',
+                    {
+                        lineHeight: '1.5rem',
+                    },
+                ],
+                'moon-16': [
+                    '1rem',
+                    {
+                        lineHeight: '1.5rem',
+                    },
+                ],
+                'moon-18': [
+                    '1.125rem',
+                    {
+                        lineHeight: '1.5rem',
+                    },
+                ],
+                'moon-20': [
+                    '1.25rem',
+                    {
+                        lineHeight: '2rem',
+                    },
+                ],
+                'moon-24': [
+                    '1.5rem',
+                    {
+                        lineHeight: '2rem',
+                    },
+                ],
+                'moon-32': [
+                    '2rem',
+                    {
+                        lineHeight: '2.5rem',
+                        letterSpacing: '-0.0313rem',
+                    },
+                ],
+                'moon-48': [
+                    '3rem',
+                    {
+                        lineHeight: '3.5rem',
+                        letterSpacing: '-0.0625rem',
+                    },
+                ],
+                'moon-56': [
+                    '3.5rem',
+                    {
+                        lineHeight: '4rem',
+                        letterSpacing: '-0.0938rem',
+                    },
+                ],
+                'moon-64': [
+                    '4rem',
+                    {
+                        lineHeight: '4.5rem',
+                        letterSpacing: '-0.125rem',
+                    },
+                ],
+                'moon-72': [
+                    '4.5rem',
+                    {
+                        lineHeight: '4.75rem',
+                        letterSpacing: '-0.1563rem',
+                    },
+                ],
+            },
             borderRadius: {
-                'moon-xs': 'var(--radius-xs)',
-                'moon-sm': 'var(--radius-sm)',
-                'moon-md': 'var(--radius-md)',
-                'moon-lg': 'var(--radius-lg)',
-                'moon-full': 'var(--radius-full)',
+                'moon-i-xs': 'var(--radius-i-xs)',
+                'moon-i-sm': 'var(--radius-i-sm)',
+                'moon-i-md': 'var(--radius-i-md)',
+                'moon-s-xs': 'var(--radius-s-xs)',
+                'moon-s-sm': 'var(--radius-s-sm)',
+                'moon-s-md': 'var(--radius-s-md)',
+                'moon-s-lg': 'var(--radius-s-lg)',
             },
@@ -26,0 +127,0 @@ zIndex: {

package.json

 {
   "name": "@heathmont/moon-core-tw",
   "sideEffects": false,
-  "version": "8.8.0",
+  "version": "8.9.0",
   "files": [
@@ -6,0 +6,0 @@ "lib"

No alert changes

Improved metrics

Total package byte prevSize

112954

increased by9.59%

Lines of code

2271

increased by16.04%

No dependency changes