@bodynarf/react.components 1.13.7 → 1.14.0

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

@@ -0,0 +1,269 @@
+.bbr-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+
+    &.is-horizontal {
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 1rem;
+    }
+}
+
+.bbr-radio-item {
+    display: flex;
+    align-items: center;
+}
+
+.is-checkradio.bbr-radio[type="radio"] {
+    outline: 0;
+    user-select: none;
+    display: inline-block;
+    position: absolute;
+    opacity: 0;
+
+    + label {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        padding-left: 1.75rem;
+        cursor: pointer;
+        font-size: $size-normal;
+        line-height: 1.25;
+        min-height: 1.5rem;
+
+        &::before {
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 1.25rem;
+            height: 1.25rem;
+            border: 0.1rem solid $grey-lighter;
+            border-radius: 50%;
+            background: transparent;
+            content: "";
+            transition: background 0.15s ease-out, border-color 0.15s ease-out;
+        }
+
+        &::after {
+            position: absolute;
+            left: 0.3125rem;
+            top: 50%;
+            transform: translateY(-50%) scale(0);
+            width: 0.625rem;
+            height: 0.625rem;
+            border-radius: 50%;
+            background: $primary;
+            content: "";
+            transition: transform 0.15s ease-out;
+        }
+    }
+
+    &:checked + label::after {
+        transform: translateY(-50%) scale(1);
+    }
+
+    &:checked + label::before {
+        border-color: $primary;
+    }
+
+    &:focus + label::before {
+        border-color: $primary;
+        box-shadow: 0 0 0 0.125em rgba($primary, 0.25);
+    }
+
+    &:hover:not(:disabled) + label::before {
+        border-color: $grey-light;
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+
+        + label {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+    }
+
+    // Circle style (default for radio)
+    &.is-circle + label {
+        &::before {
+            border-radius: 50%;
+        }
+
+        &::after {
+            border-radius: 50%;
+        }
+    }
+
+    // Block style
+    &.is-block {
+        + label {
+            padding: 0.5rem 0.75rem 0.5rem 2.25rem;
+            background: $white-bis;
+            border-radius: $radius;
+            width: 100%;
+
+            &::before {
+                left: 0.5rem;
+            }
+
+            &::after {
+                left: 0.8125rem;
+            }
+
+            &:hover {
+                background: $white-ter;
+            }
+        }
+
+        &:checked + label {
+            background: rgba($primary, 0.1);
+        }
+    }
+
+    // Without border
+    &.has-no-border + label::before {
+        border: none;
+        background: $grey-lighter;
+    }
+
+    &.has-no-border:checked + label::before {
+        background: rgba($primary, 0.2);
+    }
+
+    // Has background color
+    &.has-background-color + label::before {
+        background: $white-ter;
+    }
+
+    &.has-background-color:checked + label::before {
+        background: rgba($primary, 0.15);
+        border-color: $primary;
+    }
+
+    // Size variations
+    &.is-small {
+        + label {
+            font-size: $size-small;
+            padding-left: 1.5rem;
+
+            &::before {
+                width: 1rem;
+                height: 1rem;
+            }
+
+            &::after {
+                width: 0.5rem;
+                height: 0.5rem;
+                left: 0.25rem;
+            }
+        }
+
+        &.is-block + label {
+            padding-left: 2rem;
+
+            &::before {
+                left: 0.5rem;
+            }
+
+            &::after {
+                left: 0.75rem;
+            }
+        }
+    }
+
+    &.is-medium {
+        + label {
+            font-size: $size-medium;
+            padding-left: 2rem;
+
+            &::before {
+                width: 1.5rem;
+                height: 1.5rem;
+            }
+
+            &::after {
+                width: 0.75rem;
+                height: 0.75rem;
+                left: 0.375rem;
+            }
+        }
+
+        &.is-block + label {
+            padding-left: 2.5rem;
+
+            &::before {
+                left: 0.5rem;
+            }
+
+            &::after {
+                left: 0.875rem;
+            }
+        }
+    }
+
+    &.is-large {
+        + label {
+            font-size: $size-large;
+            padding-left: 2.25rem;
+
+            &::before {
+                width: 1.75rem;
+                height: 1.75rem;
+            }
+
+            &::after {
+                width: 0.875rem;
+                height: 0.875rem;
+                left: 0.4375rem;
+            }
+        }
+
+        &.is-block + label {
+            padding-left: 2.75rem;
+
+            &::before {
+                left: 0.5rem;
+            }
+
+            &::after {
+                left: 0.9375rem;
+            }
+        }
+    }
+
+    // Color variations
+    @each $name, $pair in $colors {
+        $color: nth($pair, 1);
+
+        &.is-#{$name} {
+            &:checked + label::before {
+                border-color: $color;
+            }
+
+            &:checked + label::after {
+                background: $color;
+            }
+
+            &:focus + label::before {
+                border-color: $color;
+                box-shadow: 0 0 0 0.125em rgba($color, 0.25);
+            }
+
+            &.is-block:checked + label {
+                background: rgba($color, 0.1);
+            }
+
+            &.has-background-color:checked + label::before {
+                background: rgba($color, 0.15);
+                border-color: $color;
+            }
+
+            &.has-no-border:checked + label::before {
+                background: rgba($color, 0.2);
+            }
+        }
+    }
+}

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

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

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

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

package/components/primitives/radioGroup/index.js

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

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

@@ -0,0 +1,61 @@
+import { BaseElementProps, ElementColor, ElementSize } from "../../../types";
+/** Single radio item */
+export interface RadioItem {
+    /** Unique item identifier */
+    id: string;
+    /** Item value */
+    value: string;
+    /** Displaying text (label) */
+    displayValue: string;
+    /** Is item disabled */
+    disabled?: boolean;
+    /** Element title (tooltip) */
+    title?: string;
+}
+/** RadioGroup component props type */
+export type RadioGroupProps = BaseElementProps & {
+    /** Radio items to display */
+    items: Array<RadioItem>;
+    /** Currently selected item id */
+    value?: string;
+    /** Name attribute for all radio inputs in the group */
+    name?: string;
+    /** Component size */
+    size?: ElementSize;
+    /** Style. Colors the radio buttons */
+    style?: ElementColor;
+    /** Is component disabled */
+    disabled?: boolean;
+    /**
+     * Display radio buttons in a row (horizontal).
+     * @default false (vertical)
+     */
+    horizontal?: boolean;
+    /**
+     * Is full colored radio (filled background).
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Display radio with circle style.
+     * @default true
+     */
+    circle?: boolean;
+    /**
+     * Remove the radio border.
+     * @default false
+     */
+    withoutBorder?: boolean;
+    /**
+     * Radio has background color.
+     * Only works if style is set.
+     * @default false
+     */
+    hasBackgroundColor?: boolean;
+    /**
+     * Handler of selection change
+     * @param item Selected item
+     */
+    onValueChange?: (item: RadioItem) => void;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/radioGroup/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzE,wBAAwB;AACxB,MAAM,WAAW,SAAS;IACtB,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IAEX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,8BAA8B;IAC9B,YAAY,EAAE,MAAM,CAAC;IAErB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,sCAAsC;AACtC,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAC7C,6BAA6B;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAExB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,qBAAqB;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,sCAAsC;IACtC,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CAC7C,CAAC"}

package/components/primitives/radioGroup/types.js

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/slider/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAkC,MAAM,OAAO,CAAC;AAOxE,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,mCAAmC;AACnC,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA+G3B,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { emptyFn, generateGuid, getClassName, isNullish } from "@bodynarf/utils";
+import { ElementSize } from "../../../../types";
+import { getElementColorClassName, getSizeClassName, mapDataAttributes } from "../../../../utils";
+import "./style.scss";
+/** Slider/Range input component */
+const Slider = ({ onValueChange = emptyFn, defaultValue, name = generateGuid(), size = ElementSize.Normal, style, disabled = false, min = 0, max = 100, step = 1, showValue = false, showMinMax = false, showProgress = true, vertical = false, verticalHeight = "200px", circle = false, valueFormatter, onBlur, className, data, title, }) => {
+    const [value, setValue] = useState(defaultValue ?? min);
+    const progressPercent = useMemo(() => {
+        if (max === min) {
+            return 0;
+        }
+        return ((value - min) / (max - min)) * 100;
+    }, [value, min, max]);
+    const onChange = useCallback((event) => {
+        const newValue = Number(event.target.value);
+        setValue(newValue);
+        onValueChange(newValue);
+    }, [onValueChange]);
+    const handleBlur = useCallback(() => {
+        if (isNullish(onBlur)) {
+            return;
+        }
+        onBlur();
+    }, [onBlur]);
+    const elClassName = getClassName([
+        "slider",
+        "bbr-slider",
+        className,
+        getSizeClassName(size, ElementSize.Normal),
+        getElementColorClassName(style),
+        showProgress ? "has-output-tooltip" : "",
+        circle ? "is-circle" : "",
+        vertical ? "is-vertical" : "",
+    ]);
+    const containerClassName = getClassName([
+        "bbr-slider-container",
+        vertical ? "is-vertical" : "",
+    ]);
+    const dataAttributes = mapDataAttributes(data);
+    return (_jsxs("div", { className: containerClassName, style: vertical ? { height: verticalHeight } : undefined, children: [showValue === true && (_jsx("output", { className: "bbr-slider-output", style: { left: `calc(${progressPercent}% - 1rem)` }, children: valueFormatter ? valueFormatter(value) : value })), _jsx("input", { min: min, max: max, id: name, step: step, name: name, type: "range", title: title, value: value, ...dataAttributes, disabled: disabled, onBlur: handleBlur, onChange: onChange, className: elClassName, style: {
+                    ["--progress-percent"]: `${progressPercent}%`,
+                    ...(vertical ? { height: verticalHeight } : {}),
+                } }), showMinMax === true && (_jsxs("div", { className: "bbr-slider-labels", children: [_jsx("span", { className: "bbr-slider-label-min", children: min }), _jsx("span", { className: "bbr-slider-label-max", children: max })] }))] }));
+};
+export default Slider;