@bodynarf/react.components 1.13.8 → 1.14.1

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

@@ -0,0 +1,321 @@
+@import "bulma/sass/utilities/derived-variables";
+
+$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;