@bodynarf/react.components 1.13.7 → 1.14.0

package/components/primitives/slider/component/style.scss

@@ -0,0 +1,319 @@
+$slider-radius: $radius !default;
+$slider-track-background: $grey-lighter !default;
+$slider-track-radius: $radius !default;
+$slider-track-border: 0px solid $grey !default;
+$slider-track-shadow: 0px 0px 0px $grey !default;
+$slider-thumb-background: $white !default;
+$slider-thumb-radius: $radius !default;
+$slider-thumb-border: 1px solid $grey-light !default;
+$slider-thumb-shadow: none !default;
+$slider-thumb-to-track-ratio: 2 !default;
+$slider-output-width: 3rem !default;
+$slider-output-background: $primary !default;
+$slider-output-radius: $radius !default;
+
+@mixin slider-size($size) {
+    $track-height: calc($size / $slider-thumb-to-track-ratio);
+    $thumb-size: $size;
+
+    &::-webkit-slider-runnable-track {
+        height: $track-height;
+    }
+
+    &::-moz-range-track {
+        height: $track-height;
+    }
+
+    &::-ms-track {
+        height: $track-height;
+    }
+
+    &::-webkit-slider-thumb {
+        height: $thumb-size;
+        width: $thumb-size;
+        margin-top: calc(($track-height - $thumb-size) / 2);
+    }
+
+    &::-moz-range-thumb {
+        height: $thumb-size;
+        width: $thumb-size;
+    }
+
+    &::-ms-thumb {
+        height: $thumb-size;
+        width: $thumb-size;
+        margin-top: 0;
+    }
+}
+
+.bbr-slider-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding-top: 0.5rem;
+
+    &.is-vertical {
+        flex-direction: row;
+        width: auto;
+        height: 200px;
+        padding-top: 0;
+        padding-left: 0.5rem;
+    }
+}
+
+.bbr-slider-output {
+    position: absolute;
+    top: -1.5rem;
+    display: inline-block;
+    width: $slider-output-width;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    text-align: center;
+    color: $white;
+    background-color: $slider-output-background;
+    border-radius: $slider-output-radius;
+    pointer-events: none;
+
+    &::after {
+        content: "";
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        margin-left: -5px;
+        border-width: 5px;
+        border-style: solid;
+        border-color: $slider-output-background transparent transparent transparent;
+    }
+}
+
+.bbr-slider-labels {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 0.25rem;
+    font-size: 0.75rem;
+    color: $grey;
+}
+
+input[type="range"].slider.bbr-slider {
+    --progress-percent: 0%;
+
+    appearance: none;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    cursor: pointer;
+
+    // Track styles
+    &::-webkit-slider-runnable-track {
+        box-sizing: border-box;
+        width: 100%;
+        height: 0.5rem;
+        background: linear-gradient(
+            to right,
+            $primary var(--progress-percent),
+            $slider-track-background var(--progress-percent)
+        );
+        border: $slider-track-border;
+        border-radius: $slider-track-radius;
+        box-shadow: $slider-track-shadow;
+    }
+
+    &::-moz-range-track {
+        box-sizing: border-box;
+        width: 100%;
+        height: 0.5rem;
+        background: $slider-track-background;
+        border: $slider-track-border;
+        border-radius: $slider-track-radius;
+        box-shadow: $slider-track-shadow;
+    }
+
+    &::-moz-range-progress {
+        height: 0.5rem;
+        background: $primary;
+        border-radius: $slider-track-radius;
+    }
+
+    &::-ms-track {
+        box-sizing: border-box;
+        width: 100%;
+        height: 0.5rem;
+        background: transparent;
+        border-color: transparent;
+        color: transparent;
+    }
+
+    &::-ms-fill-lower {
+        background: $primary;
+        border-radius: $slider-track-radius;
+    }
+
+    &::-ms-fill-upper {
+        background: $slider-track-background;
+        border-radius: $slider-track-radius;
+    }
+
+    // Thumb styles
+    &::-webkit-slider-thumb {
+        appearance: none;
+        width: 1rem;
+        height: 1rem;
+        margin-top: -0.25rem;
+        background: $slider-thumb-background;
+        border: $slider-thumb-border;
+        border-radius: $slider-thumb-radius;
+        box-shadow: $slider-thumb-shadow;
+        transition: transform 0.2s ease;
+
+        &:hover {
+            transform: scale(1.1);
+        }
+    }
+
+    &::-moz-range-thumb {
+        width: 1rem;
+        height: 1rem;
+        background: $slider-thumb-background;
+        border: $slider-thumb-border;
+        border-radius: $slider-thumb-radius;
+        box-shadow: $slider-thumb-shadow;
+        transition: transform 0.2s ease;
+
+        &:hover {
+            transform: scale(1.1);
+        }
+    }
+
+    &::-ms-thumb {
+        width: 1rem;
+        height: 1rem;
+        background: $slider-thumb-background;
+        border: $slider-thumb-border;
+        border-radius: $slider-thumb-radius;
+        box-shadow: $slider-thumb-shadow;
+    }
+
+    // Focus state
+    &:focus {
+        outline: none;
+
+        &::-webkit-slider-thumb {
+            border-color: $primary;
+            box-shadow: 0 0 0 0.125em rgba($primary, 0.25);
+        }
+
+        &::-moz-range-thumb {
+            border-color: $primary;
+            box-shadow: 0 0 0 0.125em rgba($primary, 0.25);
+        }
+    }
+
+    // Disabled state
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
+
+    // Circle style
+    &.is-circle {
+        &::-webkit-slider-thumb {
+            border-radius: 50%;
+        }
+
+        &::-moz-range-thumb {
+            border-radius: 50%;
+        }
+
+        &::-ms-thumb {
+            border-radius: 50%;
+        }
+    }
+
+    // Size variations
+    &.is-small {
+        @include slider-size($size-small);
+    }
+
+    &.is-medium {
+        @include slider-size($size-medium);
+    }
+
+    &.is-large {
+        @include slider-size($size-large);
+    }
+
+    // Color variations
+    @each $name, $pair in $colors {
+        $color: nth($pair, 1);
+
+        &.is-#{$name} {
+            &::-webkit-slider-runnable-track {
+                background: linear-gradient(
+                    to right,
+                    $color var(--progress-percent),
+                    $slider-track-background var(--progress-percent)
+                );
+            }
+
+            &::-moz-range-progress {
+                background: $color;
+            }
+
+            &::-ms-fill-lower {
+                background: $color;
+            }
+
+            &:focus {
+                &::-webkit-slider-thumb {
+                    border-color: $color;
+                    box-shadow: 0 0 0 0.125em rgba($color, 0.25);
+                }
+
+                &::-moz-range-thumb {
+                    border-color: $color;
+                    box-shadow: 0 0 0 0.125em rgba($color, 0.25);
+                }
+            }
+        }
+    }
+
+    // Vertical mode
+    &.is-vertical {
+        writing-mode: vertical-lr;
+        direction: rtl;
+        width: 0.5rem;
+        height: 100%;
+        min-height: 100px;
+
+        &::-webkit-slider-runnable-track {
+            width: 0.5rem;
+            height: 100%;
+            background: linear-gradient(
+                to top,
+                $primary var(--progress-percent),
+                $slider-track-background var(--progress-percent)
+            );
+        }
+
+        &::-webkit-slider-thumb {
+            margin-top: 0;
+            margin-left: -0.25rem;
+        }
+
+        @each $name, $pair in $colors {
+            $color: nth($pair, 1);
+
+            &.is-#{$name} {
+                &::-webkit-slider-runnable-track {
+                    background: linear-gradient(
+                        to top,
+                        $color var(--progress-percent),
+                        $slider-track-background var(--progress-percent)
+                    );
+                }
+            }
+        }
+    }
+}

package/components/primitives/slider/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./component";
+export * from "./types";
+//# sourceMappingURL=index.d.ts.map

package/components/primitives/slider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,cAAc,SAAS,CAAC"}

package/components/primitives/slider/index.js

@@ -0,0 +1,2 @@
+export { default } from "./component";
+export * from "./types";

package/components/primitives/slider/types.d.ts

@@ -0,0 +1,51 @@
+import { BaseNotNullableInputElementProps, BlurableElement } from "../../../types";
+/** Slider/Range component props type */
+export type SliderProps = Omit<BaseNotNullableInputElementProps<number>, "readonly" | "validationState" | "loading" | "placeholder" | "hint" | "autofocus" | "label" | "rounded"> & BlurableElement & {
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /**
+     * Step increment.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Display current value as tooltip/bubble above the slider.
+     * @default false
+     */
+    showValue?: boolean;
+    /**
+     * Display min and max labels below the slider.
+     * @default false
+     */
+    showMinMax?: boolean;
+    /**
+     * Fill the track from start to current value with color.
+     * @default true
+     */
+    showProgress?: boolean;
+    /**
+     * Make the slider vertical instead of horizontal.
+     * @default false
+     */
+    vertical?: boolean;
+    /**
+     * Height of the slider in vertical mode (in px or any CSS unit).
+     * @default "200px"
+     */
+    verticalHeight?: string;
+    /**
+     * Display as circle/rounded style.
+     * @default false
+     */
+    circle?: boolean;
+    /**
+     * Format the displayed value.
+     * Used when `showValue` is true.
+     * @example (value) => `${value}%`
+     * @example (value) => `${value}°C`
+     */
+    valueFormatter?: (value: number) => string;
+};
+//# sourceMappingURL=types.d.ts.map

package/components/primitives/slider/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/slider/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gCAAgC,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE/E,wCAAwC;AACxC,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,gCAAgC,CAAC,MAAM,CAAC,EACjE,UAAU,GAAG,iBAAiB,GAC9B,SAAS,GAAG,aAAa,GACzB,MAAM,GAAG,WAAW,GACpB,OAAO,GAAG,SAAS,CACxB,GAAG,eAAe,GAAG;IAClB,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC9C,CAAC"}

package/components/primitives/slider/types.js

@@ -0,0 +1 @@
+export {};

package/components/primitives/switch/component/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import "./style.scss";
+import { SwitchProps } from "..";
+/** Switch/Toggle input component */
+declare const Switch: FC<SwitchProps>;
+export default Switch;
+//# sourceMappingURL=index.d.ts.map

package/components/primitives/switch/component/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/switch/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAe,MAAM,OAAO,CAAC;AAQrD,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAEjC,oCAAoC;AACpC,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA8F3B,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/components/primitives/switch/component/index.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { emptyFn, generateGuid, getClassName, isNotNullish, isNullish } from "@bodynarf/utils";
+import { ElementSize } from "../../../../types";
+import { getElementColorClassName, getSizeClassName, mapDataAttributes } from "../../../../utils";
+import ComponentWithLabel from "../../internal/componentWithLabel";
+import "./style.scss";
+/** Switch/Toggle input component */
+const Switch = ({ onValueChange = emptyFn, defaultValue, label, name = generateGuid(), size = ElementSize.Normal, style, disabled = false, rounded = false, outlined = false, thin = false, rtl = false, isFormLabel = false, className, data, title }) => {
+    const onChecked = useCallback((event) => onValueChange(event.target.checked), [onValueChange]);
+    const elClassName = getClassName([
+        "switch",
+        "bbr-switch",
+        className,
+        getSizeClassName(size, ElementSize.Normal),
+        getElementColorClassName(style),
+        rounded ? "is-rounded" : "",
+        outlined ? "is-outlined" : "",
+        thin ? "is-thin" : "",
+        rtl ? "is-rtl" : "",
+    ]);
+    const dataAttributes = mapDataAttributes(data);
+    if (isNotNullish(label) && isFormLabel) {
+        return (_jsxs(ComponentWithLabel, { id: name, size: size, label: {
+                ...label,
+                horizontal: label.horizontal ?? false,
+                horizontalContainerClassName: getClassName([label.horizontalContainerClassName, "p-0"]),
+            }, children: [_jsx("input", { id: name, name: name, type: "checkbox", disabled: disabled, ...dataAttributes, onChange: onChecked, className: elClassName, defaultChecked: defaultValue }), _jsx("label", { title: title, htmlFor: name, className: "is-empty" })] }));
+    }
+    const isEmptyLabel = isNullish(label);
+    const labelClassName = isEmptyLabel
+        ? "is-empty"
+        : undefined;
+    const labelDataAttributes = isNullish(label?.data)
+        ? undefined
+        : mapDataAttributes(label.data);
+    return (_jsxs("div", { className: "bbr-field bbr-input field mr-2", children: [_jsx("input", { id: name, name: name, type: "checkbox", disabled: disabled, ...dataAttributes, onChange: onChecked, className: elClassName, defaultChecked: defaultValue }), _jsx("label", { htmlFor: name, ...labelDataAttributes, className: labelClassName, title: isEmptyLabel ? title : label?.title, children: label?.caption })] }));
+};
+export default Switch;

package/components/primitives/switch/component/style.scss

@@ -0,0 +1,214 @@
+$switch-background: $grey-light !default;
+$switch-border: 0.1rem solid transparent !default;
+$switch-background-active: $primary !default;
+$switch-radius: $radius !default;
+$switch-paddle-background: $white !default;
+$switch-paddle-background-active: $primary !default;
+$switch-paddle-offset: 0.25rem !default;
+$switch-paddle-transition: all 0.25s ease-out !default;
+$switch-focus: 1px dotted $grey-light !default;
+
+@mixin switch-size($size) {
+    $switch-height: $size * 1.5;
+    $switch-width: $switch-height * 2;
+    $paddle-height: $switch-height - ($switch-paddle-offset * 2);
+    $paddle-width: $switch-height - ($switch-paddle-offset * 2);
+    $paddle-active-offest: $switch-width - $paddle-width - ($switch-paddle-offset * 1.5);
+
+    + label {
+        position: relative;
+        display: initial;
+        font-size: $size;
+        line-height: initial;
+        padding-left: $switch-width + 0.5;
+        padding-top: 0.2rem;
+        cursor: pointer;
+
+        &::before {
+            position: absolute;
+            display: block;
+            top: 0;
+            left: 0;
+            width: $switch-width;
+            height: $switch-height;
+            border: $switch-border;
+            border-radius: $switch-radius;
+            background: $switch-background;
+            content: "";
+        }
+
+        &::after {
+            display: block;
+            position: absolute;
+            top: ($switch-height * 0.5) - ($paddle-height * 0.5);
+            left: $switch-paddle-offset;
+            width: $paddle-width;
+            height: $paddle-height;
+            transform: translate3d(0, 0, 0);
+            border-radius: $switch-radius;
+            background: $switch-paddle-background;
+            transition: $switch-paddle-transition;
+            content: "";
+        }
+
+        &.is-empty {
+            padding-left: $switch-width;
+            margin: 0 !important;
+        }
+    }
+
+    &.is-rtl + label {
+        padding-left: 0;
+        padding-right: $switch-width + 0.5;
+
+        &::before {
+            left: auto;
+            right: 0;
+        }
+
+        &::after {
+            left: auto;
+            right: $paddle-active-offest;
+        }
+    }
+
+    &:checked + label::after {
+        left: $paddle-active-offest;
+    }
+
+    &.is-rtl:checked + label::after {
+        left: auto;
+        right: $switch-paddle-offset;
+    }
+
+    &.is-outlined {
+        + label {
+            &::before {
+                background-color: transparent;
+                border-color: $switch-background;
+            }
+
+            &::after {
+                background: $switch-background;
+            }
+        }
+
+        &:checked + label {
+            &::before {
+                background-color: transparent;
+                border-color: $switch-background-active;
+            }
+
+            &::after {
+                background: $switch-paddle-background-active;
+            }
+        }
+    }
+
+    &.is-thin {
+        + label {
+            &::before {
+                top: $switch-height * 0.25;
+                height: $switch-height * 0.5;
+            }
+        }
+    }
+
+    &.is-rounded {
+        + label {
+            &::before {
+                border-radius: $switch-height * 0.5;
+            }
+
+            &::after {
+                border-radius: 50%;
+            }
+        }
+    }
+}
+
+.switch[type="checkbox"].bbr-switch {
+    outline: 0;
+    user-select: none;
+    display: inline-block;
+    position: absolute;
+    opacity: 0;
+
+    &:focus + label::before {
+        outline: $switch-focus;
+    }
+
+    &[disabled] {
+        cursor: not-allowed;
+
+        + label {
+            opacity: 0.5;
+
+            &::before {
+                opacity: 0.5;
+            }
+
+            &::after {
+                opacity: 0.5;
+            }
+
+            &:hover {
+                cursor: not-allowed;
+            }
+        }
+    }
+
+    &:checked + label::before {
+        background: $switch-background-active;
+    }
+
+    // Size variations
+    @include switch-size($size-normal);
+
+    &.is-small {
+        @include switch-size($size-small);
+    }
+
+    &.is-medium {
+        @include switch-size($size-medium);
+    }
+
+    &.is-large {
+        @include switch-size($size-large);
+    }
+
+    // Color variations
+    @each $name, $pair in $colors {
+        $color: nth($pair, 1);
+        $color-invert: nth($pair, 2);
+
+        &.is-#{$name} {
+            &:checked + label::before {
+                background: $color;
+            }
+
+            &.is-outlined {
+                &:checked + label {
+                    &::before {
+                        background-color: transparent;
+                        border-color: $color !important;
+                    }
+
+                    &::after {
+                        background: $color;
+                    }
+                }
+            }
+
+            &.is-thin {
+                &.is-outlined {
+                    &:checked + label {
+                        &::after {
+                            box-shadow: none;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/components/primitives/switch/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./component";
+export * from "./types";
+//# sourceMappingURL=index.d.ts.map

package/components/primitives/switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,cAAc,SAAS,CAAC"}

package/components/primitives/switch/index.js

@@ -0,0 +1,2 @@
+export { default } from "./component";
+export * from "./types";

package/components/primitives/switch/types.d.ts

@@ -0,0 +1,23 @@
+import { BaseNotNullableInputElementProps, LabelConfiguration } from "../../../types";
+/** Switch/Toggle component props type */
+export type SwitchProps = Omit<BaseNotNullableInputElementProps<boolean>, "readonly" | "validationState" | "loading" | "placeholder" | "hint" | "autofocus" | "label"> & {
+    /** Label configuration */
+    label?: Omit<LabelConfiguration, "horizontal"> & Partial<Pick<LabelConfiguration, "horizontal">>;
+    /** Display switch with rounded edges (pill-shaped) */
+    rounded?: boolean;
+    /** Display switch with outlined style */
+    outlined?: boolean;
+    /** Display switch as thin variant */
+    thin?: boolean;
+    /**
+     * Right-to-left mode.
+     * Switch will be displayed on the right side of the label
+     */
+    rtl?: boolean;
+    /**
+     * Display component with label as form element.
+     * Label will be placed at left
+     */
+    isFormLabel?: boolean;
+};
+//# sourceMappingURL=types.d.ts.map

package/components/primitives/switch/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/switch/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gCAAgC,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAElF,yCAAyC;AACzC,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,gCAAgC,CAAC,OAAO,CAAC,EAClE,UAAU,GAAG,iBAAiB,GAC9B,SAAS,GAAG,aAAa,GACzB,MAAM,GAAG,WAAW,GACpB,OAAO,CACZ,GAAG;IACA,0BAA0B;IAC1B,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,YAAY,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,YAAY,CAAC,CAAC,CAAC;IAEjG,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qCAAqC;IACrC,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;OAGG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IAEd;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC"}

package/components/primitives/switch/types.js

@@ -0,0 +1 @@
+export {};