hrm_ui_lib 3.1.15 → 3.1.17

package/components/DarkModeSwitcher/DarkModeSwitcher.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TSwitcherProps } from './types';
+export declare const DarkModeSwitcher: React.ForwardRefExoticComponent<TSwitcherProps & React.RefAttributes<unknown>>;

package/components/DarkModeSwitcher/DarkModeSwitcher.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import classnames from 'classnames';
+import { Label } from '../../helperComponents/Label';
+import IconMoon from '../SVGIcons/IconMoon';
+import IconSun from '../SVGIcons/IconSun';
+export const DarkModeSwitcher = forwardRef((props, ref) => {
+    const { onClick, id = '', name, value, disabled, label, inlineType = false, dataId, size = 'small', setFieldValue, selectedValue, className = '', labelAddons, orientation = 'right', hasSpaceBetween = true } = props;
+    const isChecked = !!value || !!selectedValue;
+    const changeHandler = () => {
+        if (name && setFieldValue) {
+            setFieldValue(name, !isChecked);
+        }
+        if (onClick) {
+            onClick(!isChecked);
+        }
+    };
+    const labelComponent = useMemo(() => (_jsx(Label, { text: label, disabled: disabled, labelAddons: labelAddons, size: inlineType ? 'standard' : size, className: "switcher__label" })), [label, disabled, labelAddons, inlineType, size]);
+    const iconSize = size === 'small' ? 'xsmall' : 'small';
+    return (_jsxs("div", { className: classnames('dark-mode-switcher', {
+            'dark-mode-switcher--inline': inlineType,
+            'dark-mode-switcher--space-between': hasSpaceBetween
+        }), children: [label && orientation === 'right' && labelComponent, _jsxs("label", { id: id, className: classnames('controller', 'controller--switch', `controller--switch-${size}`, className, { 'controller--disabled': disabled }), children: [_jsx("input", { "data-id": dataId, type: "checkbox", tabIndex: 0, onChange: changeHandler, checked: isChecked, disabled: disabled }), _jsxs("span", { className: classnames('controller__icon', { dark_mode: selectedValue }), children: [selectedValue ? _jsx(IconSun, { size: iconSize }) : _jsx(IconMoon, { size: iconSize }), _jsx("span", { className: "controller__icon__inner" })] })] }), label && orientation === 'left' && labelComponent] }));
+});
+DarkModeSwitcher.displayName = 'DarkModeSwitcher';

package/components/DarkModeSwitcher/index.d.ts

@@ -0,0 +1 @@
+export * from './DarkModeSwitcher';

package/components/DarkModeSwitcher/index.js

@@ -0,0 +1 @@
+export * from './DarkModeSwitcher';

package/components/DarkModeSwitcher/types.d.ts

@@ -0,0 +1,17 @@
+export interface TSwitcherProps extends IFormCompProps {
+    onClick?: (isChecked: boolean) => void;
+    className?: string;
+    disabled?: boolean;
+    selectedValue?: boolean;
+    size?: 'large' | 'small';
+    inlineType?: boolean;
+    id?: string;
+    label?: string;
+    labelAddons?: React.ReactElement;
+    orientation?: 'left' | 'right';
+    hasSpaceBetween?: boolean;
+}
+export declare enum ThemeMode {
+    Light = "light",
+    Dark = "dark"
+}

package/components/DarkModeSwitcher/types.js

@@ -0,0 +1,5 @@
+export var ThemeMode;
+(function (ThemeMode) {
+    ThemeMode["Light"] = "light";
+    ThemeMode["Dark"] = "dark";
+})(ThemeMode || (ThemeMode = {}));

package/components/SVGIcons/IconMoon.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { ISVGIconProps } from '../../type';
+declare const IconMoon: ({ size, type, className, onClick, refHandler, id, dataId }: ISVGIconProps) => ReactElement;
+export default IconMoon;

package/components/SVGIcons/IconMoon.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+const IconMoon = ({ size, type, className = '', onClick, refHandler, id, dataId }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
+        [`svg-icon__size-${size}`]: size,
+        [`svg-icon__type-${type}`]: type,
+        [className]: className
+    }), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-id": dataId ? `${dataId}-svg-icon` : '', children: _jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) }));
+export default IconMoon;

package/components/SVGIcons/IconSun.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { ISVGIconProps } from '../../type';
+declare const IconSun: ({ size, type, className, onClick, refHandler, id, dataId }: ISVGIconProps) => ReactElement;
+export default IconSun;

package/components/SVGIcons/IconSun.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+const IconSun = ({ size, type, className = '', onClick, refHandler, id, dataId }) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
+        [`svg-icon__size-${size}`]: size,
+        [`svg-icon__type-${type}`]: type,
+        [className]: className
+    }), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-id": dataId ? `${dataId}-svg-icon` : '', children: [_jsx("circle", { cx: "12", cy: "12", r: "5" }), " ", _jsx("line", { x1: "12", y1: "1", x2: "12", y2: "3" }), ' ', _jsx("line", { x1: "12", y1: "21", x2: "12", y2: "23" }), " ", _jsx("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }), ' ', _jsx("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }), " ", _jsx("line", { x1: "1", y1: "12", x2: "3", y2: "12" }), ' ', _jsx("line", { x1: "21", y1: "12", x2: "23", y2: "12" }), " ", _jsx("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }), ' ', _jsx("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })] }));
+export default IconSun;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hrm_ui_lib",
-  "version": "3.1.15",
+  "version": "3.1.17",
   "description": "UI library for Dino",
   "main": "./index.cjs",
   "module": "./index.js",