rbro-tat-uds 1.6.36 → 2.0.0

package/build/esm/components/Slider/Slider.js

@@ -0,0 +1,244 @@
+"use strict";
+"use client";
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useCallback, useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import IconButton from '../IconButton/IconButton.js';
+import { colors } from '../../utils';
+
+const _constraint_height = [32, 40, 48];
+const SliderStyled = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: ${(props) => props.$wrapperWidth && typeof props.$wrapperWidth === "string" ? props.$wrapperWidth : "100%"};
+  height: ${(props) => props.$height && _constraint_height.includes(props.$height) && props.$height + "px"};
+
+  ${(props) => props.$showSteppers && css`
+      align-items: center;
+      gap: 16px;
+    `}
+`;
+const SliderRangeStyled = styled.div`
+  flex: 1;
+  height: 100%;
+  cursor: ${({ $disabled }) => $disabled ? "default" : "pointer"};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  & > div {
+    width: 100%;
+    height: 4px;
+    flex: 1;
+    border-radius: 2px;
+    background: ${colors.gray_60};
+    cursor: ${({ $disabled }) => $disabled ? "default" : "pointer"};
+    position: relative;
+    outline: none;
+
+    & > div {
+      position: absolute;
+      left: 0;
+      height: 100%;
+      background-color: ${({ $disabled }) => $disabled ? colors.gray_300 : colors.info_700};
+      border-radius: inherit;
+
+      & > span {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        /* right: -16px; */
+        height: 32px;
+        width: 32px;
+        border-radius: 50%;
+        background: ${colors.white};
+        border: 2px solid
+          ${(props) => props.$disabled ? colors.gray_100 : colors.gray_150};
+      }
+    }
+  }
+`;
+const Slider = ({
+  id,
+  name,
+  value = 0,
+  setValue,
+  min = 0,
+  max = 100,
+  showSteppers = false,
+  stepSize = 1,
+  disabled = false,
+  height = 32,
+  wrapperWidth,
+  ...rest
+}) => {
+  const sliderRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const moveSliderPosition = useCallback(
+    (event) => {
+      const sliderBoundingClientRect = sliderRef.current?.getBoundingClientRect();
+      if (sliderBoundingClientRect) {
+        let clientX;
+        if ("touches" in event) {
+          clientX = event.touches[0]?.clientX;
+        } else if ("clientX" in event) {
+          clientX = event.clientX;
+        }
+        if (clientX !== void 0) {
+          const posX = clientX - sliderBoundingClientRect.left;
+          const totalWidth = sliderBoundingClientRect.width;
+          const rawValue = posX / totalWidth * (max - min) + min;
+          let selectedValue = Math.round(rawValue / stepSize) * stepSize;
+          selectedValue = Math.max(min, selectedValue);
+          selectedValue = Math.min(max, selectedValue);
+          setValue && setValue(selectedValue);
+        }
+      }
+    },
+    [max, min, setValue, stepSize]
+  );
+  const eventSteppers = (t) => {
+    if (t === "minus") {
+      if (value === min) return;
+      const prevValue = value - stepSize;
+      if (prevValue < min) {
+        setValue && setValue(min);
+        return;
+      }
+      if (setValue) {
+        setValue(value - stepSize);
+      }
+    } else {
+      if (value === max) return;
+      const nextValue = value + stepSize;
+      if (nextValue > max) {
+        setValue && setValue(max);
+        return;
+      }
+      if (setValue) {
+        setValue(value + stepSize);
+      }
+    }
+  };
+  const onMouseUp = useCallback(() => {
+    setValue && setValue(value);
+    setIsDragging(false);
+  }, [value, setValue]);
+  const onMouseMove = useCallback(
+    (event) => {
+      if (isDragging) {
+        moveSliderPosition(event);
+      }
+    },
+    [isDragging, moveSliderPosition]
+  );
+  const onMouseDown = (event) => {
+    if (disabled) return;
+    moveSliderPosition(event);
+    setIsDragging(true);
+  };
+  const onTouchStart = (event) => {
+    setIsDragging(true);
+    moveSliderPosition(event);
+  };
+  const onTouchMove = useCallback(
+    (event) => {
+      moveSliderPosition(event);
+    },
+    [moveSliderPosition]
+  );
+  const onTouchEnd = useCallback(() => {
+    setValue && setValue(value);
+    setIsDragging(false);
+  }, [value, setValue]);
+  useEffect(() => {
+    if (disabled) return;
+    if (isDragging) {
+      window.addEventListener("mousemove", onMouseMove);
+      window.addEventListener("mouseup", onMouseUp);
+      window.addEventListener("touchmove", onTouchMove, {
+        passive: true
+      });
+      window.addEventListener("touchend", onTouchEnd);
+    }
+    return () => {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+      window.removeEventListener("touchmove", onTouchMove);
+      window.removeEventListener("touchend", onTouchEnd);
+    };
+  }, [isDragging, onMouseMove, onMouseUp, onTouchEnd, onTouchMove, disabled]);
+  return /* @__PURE__ */ jsxs(
+    SliderStyled,
+    {
+      $height: height,
+      $showSteppers: showSteppers,
+      $disabled: disabled,
+      $wrapperWidth: wrapperWidth,
+      children: [
+        showSteppers && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            disabled,
+            icon: "minus",
+            intent: "info",
+            variant: "secondaryOutlined",
+            size: "small",
+            shape: "circle",
+            onClick: () => eventSteppers("minus")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SliderRangeStyled,
+          {
+            $disabled: disabled,
+            ref: sliderRef,
+            role: "slider",
+            id,
+            "aria-label": name,
+            tabIndex: 0,
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            "aria-valuenow": value,
+            onMouseDown,
+            onTouchStart,
+            ...rest,
+            children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  width: `${(value - min) / (max - min) * 100}%`
+                },
+                children: /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      cursor: disabled ? "default" : isDragging ? "grabbing" : "grab",
+                      right: `${(value - min) / (max - min) * 100 * 0.32 - 32}px`
+                    }
+                  }
+                )
+              }
+            ) })
+          }
+        ),
+        showSteppers && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            disabled,
+            icon: "add",
+            intent: "info",
+            variant: "secondaryOutlined",
+            size: "small",
+            shape: "circle",
+            onClick: () => eventSteppers("add")
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { Slider as default };

package/build/esm/components/Slider/index.js

@@ -0,0 +1,8 @@
+"use strict";
+"use client";
+
+import Slider from './Slider.js';
+
+
+
+export { Slider as default };

package/build/esm/components/Spinner/Spinner.js

@@ -0,0 +1,50 @@
+"use strict";
+"use client";
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { colors } from '../../utils';
+import styled from 'styled-components';
+import SpinnerImage from '../../assets/icons/spinner.svg.js';
+
+const StyledSpinner = styled(SpinnerImage)`
+  animation: spin ${({ $speed }) => $speed ? $speed : 1}s linear infinite;
+  width: ${({ $size, ...rest }) => $size ? $size : rest.width}px;
+  height: ${({ $size, ...rest }) => $size ? $size : rest.width}px;
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+const StyledSpinnerWrapper = styled.div`
+  display: flex;
+  gap: 8px;
+  width: fit-content;
+  justify-items: center;
+  align-items: center;
+  flex-direction: ${({ $direction }) => $direction === "vertical" ? "column" : "row"};
+`;
+const StyledSpinnerText = styled.span`
+  color: ${colors.gray_700};
+  font-weight: 400;
+  font-size: ${({ $size }) => $size === 24 ? 16 : 14}px;
+`;
+const Spinner = ({
+  size = 24,
+  text,
+  direction = "vertical",
+  speed = 1,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxs(StyledSpinnerWrapper, { $direction: direction, ...rest, children: [
+    /* @__PURE__ */ jsx(StyledSpinner, { $size: size, $speed: speed }),
+    text && /* @__PURE__ */ jsx(StyledSpinnerText, { $size: size, children: text })
+  ] });
+};
+
+export { Spinner as default };

package/build/esm/components/Spinner/index.js

@@ -0,0 +1,8 @@
+"use strict";
+"use client";
+
+import Spinner from './Spinner.js';
+
+
+
+export { Spinner as default };