rbro-tat-uds 1.6.36 → 2.0.0

package/build/esm/components/StepTab/StepTab.js

@@ -0,0 +1,487 @@
+"use strict";
+"use client";
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import styled, { css } from 'styled-components';
+import { colors } from '../../utils';
+
+const StepTabStyled = styled.button`
+  width: fit-content;
+  outline: none;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+
+  ${({ $intent, $label }) => $intent && ["tabs", "subtabs"].includes($intent) && ($intent === "subtabs" ? css`
+          height: 32px;
+          padding: ${$label?.length ? "0px 12px 0px 4px" : "0px 4px 0px 4px"};
+        ` : css`
+          height: 40px;
+          padding: ${$label?.length ? "0px 16px 0px 8px" : "0px 8px 0px 8px"};
+        `)};
+
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: 20px;
+
+  & > div {
+    width: 24px;
+    height: 24px;
+    border-radius: 999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+
+  & > span {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 120%;
+    color: ${colors.gray_950};
+  }
+
+  ${(props) => props.$variant && [
+  "default",
+  "blue",
+  "purple",
+  "magenta",
+  "yellow",
+  "black",
+  "danger"
+].includes(props.$variant) ? props.$intent === "subtabs" ? variantsStyledSubtabs[props.$variant] : variantsStyledTab[props.$variant] : variantsStyledTab.default}
+
+  &:disabled {
+    background-color: transparent;
+    cursor: default;
+
+    & > div {
+      background-color: ${colors.gray_200};
+      color: ${colors.white};
+    }
+
+    & > span {
+      color: ${colors.gray_400};
+    }
+  }
+`;
+const variantsStyledTab = {
+  default: css`
+    background-color: transparent;
+
+    & > div {
+      background-color: ${colors.info_600};
+      color: ${colors.white};
+    }
+
+    &:hover {
+      background-color: ${colors.info_100};
+    }
+
+    ${(props) => props.$selected && css`
+        background-color: ${colors.info_600};
+
+        &:hover {
+          background-color: ${colors.info_600};
+        }
+
+        & > div {
+          background-color: ${colors.white};
+          color: ${colors.info_600};
+        }
+
+        & > span {
+          color: ${colors.white};
+        }
+      `}
+  `,
+  blue: css`
+    & > div {
+      background-color: ${colors.blue_500};
+      color: ${colors.white};
+    }
+
+    &:hover {
+      background-color: ${colors.blue_50};
+    }
+
+    ${(props) => props.$selected && css`
+        background-color: ${colors.blue_500};
+
+        &:hover {
+          background-color: ${colors.blue_500};
+        }
+
+        & > div {
+          background-color: ${colors.white};
+          color: ${colors.blue_500};
+        }
+
+        & > span {
+          color: ${colors.white};
+        }
+      `}
+  `,
+  purple: css`
+    & > div {
+      background-color: ${colors.purple_500};
+      color: ${colors.white};
+    }
+
+    &:hover {
+      background-color: ${colors.purple_50};
+    }
+
+    ${(props) => props.$selected && css`
+        background-color: ${colors.purple_500};
+
+        &:hover {
+          background-color: ${colors.purple_500};
+        }
+
+        & > div {
+          background-color: ${colors.white};
+          color: ${colors.purple_500};
+        }
+
+        & > span {
+          color: ${colors.white};
+        }
+      `}
+  `,
+  magenta: css`
+    & > div {
+      background-color: ${colors.pink_500};
+      color: ${colors.white};
+    }
+
+    &:hover {
+      background-color: ${colors.pink_50};
+    }
+
+    ${(props) => props.$selected && css`
+        background-color: ${colors.pink_500};
+
+        &:hover {
+          background-color: ${colors.pink_500};
+        }
+
+        & > div {
+          background-color: ${colors.white};
+          color: ${colors.pink_500};
+        }
+
+        & > span {
+          color: ${colors.white};
+        }
+      `}
+  `,
+  yellow: css`
+    & > div {
+      background-color: ${colors.accent_500};
+      color: ${colors.gray_950};
+    }
+
+    &:hover {
+      background-color: ${colors.accent_200};
+    }
+
+    ${(props) => props.$selected && css`
+        background-color: ${colors.accent_500};
+
+        &:hover {
+          background-color: ${colors.accent_500};
+        }
+
+        & > div {
+          background-color: ${colors.white};
+          color: ${colors.gray_950};
+        }
+
+        & > span {
+          color: ${colors.gray_950};
+        }
+      `}
+  `,
+  black: css`
+    & > div {
+      background-color: ${colors.gray_950};
+      color: ${colors.white};
+    }
+
+    &:hover {
+      background-color: ${colors.gray_200};
+    }
+
+    ${(props) => props.$selected && css`
+        background-color: ${colors.gray_950};
+
+        &:hover {
+          background-color: ${colors.gray_950};
+        }
+
+        & > div {
+          background-color: ${colors.white};
+          color: ${colors.gray_950};
+        }
+
+        & > span {
+          color: ${colors.white};
+        }
+      `}
+  `,
+  danger: css`
+    & > div {
+      background-color: ${colors.danger_500};
+      color: ${colors.white};
+    }
+
+    & > span {
+      color: ${colors.danger_500};
+    }
+
+    &:hover {
+      background-color: ${colors.danger_100};
+    }
+
+    ${(props) => props.$selected && css`
+        background-color: ${colors.danger_500};
+        color: ${colors.white};
+
+        &:hover {
+          background-color: ${colors.danger_500};
+        }
+
+        & > div {
+          background-color: ${colors.white};
+          color: ${colors.warning_600};
+        }
+
+        & > span {
+          color: ${colors.white};
+        }
+      `}
+  `
+};
+const variantsStyledSubtabs = {
+  default: css`
+    & > div {
+      background-color: ${colors.info_600};
+      color: ${colors.white};
+    }
+
+    &:hover {
+      background-color: ${colors.info_100};
+    }
+
+    ${(props) => props.$selected && css`
+        background-color: ${colors.info_150};
+
+        &:hover {
+          background-color: ${colors.info_150};
+        }
+
+        & > div {
+          background-color: ${colors.white};
+          color: ${colors.info_600};
+        }
+
+        & > span {
+          color: ${colors.gray_950};
+        }
+      `}
+  `,
+  blue: css`
+    & > div {
+      background-color: ${colors.blue_500};
+      color: ${colors.white};
+    }
+
+    &:hover {
+      background-color: ${colors.blue_50};
+    }
+
+    ${(props) => props.$selected && css`
+        background-color: ${colors.blue_100};
+
+        &:hover {
+          background-color: ${colors.blue_100};
+        }
+
+        & > div {
+          background-color: ${colors.white};
+          color: ${colors.blue_500};
+        }
+
+        & > span {
+          color: ${colors.gray_950};
+        }
+      `}
+  `,
+  purple: css`
+    & > div {
+      background-color: ${colors.purple_500};
+      color: ${colors.white};
+    }
+
+    &:hover {
+      background-color: ${colors.purple_50};
+    }
+
+    ${(props) => props.$selected && css`
+        background-color: ${colors.purple_100};
+
+        &:hover {
+          background-color: ${colors.purple_100};
+        }
+
+        & > div {
+          background-color: ${colors.white};
+          color: ${colors.purple_500};
+        }
+
+        & > span {
+          color: ${colors.gray_950};
+        }
+      `}
+  `,
+  magenta: css`
+    & > div {
+      background-color: ${colors.pink_500};
+      color: ${colors.white};
+    }
+
+    &:hover {
+      background-color: ${colors.pink_50};
+    }
+
+    ${(props) => props.$selected && css`
+        background-color: ${colors.pink_50};
+
+        &:hover {
+          background-color: ${colors.pink_50};
+        }
+
+        & > div {
+          background-color: ${colors.white};
+          color: ${colors.pink_500};
+        }
+
+        & > span {
+          color: ${colors.gray_950};
+        }
+      `}
+  `,
+  yellow: css`
+    & > div {
+      background-color: ${colors.accent_500};
+      color: ${colors.gray_950};
+    }
+
+    &:hover {
+      background-color: ${colors.accent_100};
+    }
+
+    ${(props) => props.$selected && css`
+        background-color: ${colors.accent_200};
+
+        &:hover {
+          background-color: ${colors.accent_200};
+        }
+
+        & > div {
+          background-color: ${colors.white};
+          color: ${colors.gray_950};
+        }
+
+        & > span {
+          color: ${colors.gray_950};
+        }
+      `}
+  `,
+  black: css`
+    & > div {
+      background-color: ${colors.gray_950};
+      color: ${colors.white};
+    }
+
+    &:hover {
+      background-color: ${colors.gray_100};
+    }
+
+    ${(props) => props.$selected && css`
+        background-color: ${colors.gray_200};
+
+        &:hover {
+          background-color: ${colors.gray_200};
+        }
+
+        & > div {
+          background-color: ${colors.white};
+          color: ${colors.gray_950};
+        }
+
+        & > span {
+          color: ${colors.gray_950};
+        }
+      `}
+  `,
+  danger: css`
+    & > div {
+      background-color: ${colors.danger_500};
+      color: ${colors.white};
+    }
+
+    & > span {
+      color: ${colors.danger_600};
+    }
+
+    &:hover {
+      background-color: ${colors.danger_100};
+    }
+
+    ${(props) => props.$selected && css`
+        background-color: ${colors.danger_200};
+
+        &:hover {
+          background-color: ${colors.danger_200};
+        }
+
+        & > div {
+          background-color: ${colors.white};
+          color: ${colors.danger_500};
+        }
+
+        & > span {
+          color: ${colors.danger_600};
+        }
+      `}
+  `
+};
+const StepTab = ({
+  intent = "tabs",
+  variant = "default",
+  label = "Configuratie",
+  stepText = "A",
+  selected = false,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxs(
+    StepTabStyled,
+    {
+      $intent: intent,
+      $selected: selected,
+      $variant: variant,
+      $label: label,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("div", { children: variant === "danger" ? "!" : stepText }),
+        label && /* @__PURE__ */ jsx("span", { children: label })
+      ]
+    }
+  );
+};
+
+export { StepTab as default };

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

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

package/build/esm/components/StepsBar/StepsBar.js

@@ -0,0 +1,64 @@
+"use strict";
+"use client";
+
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import styled from 'styled-components';
+import { colors } from '../../utils';
+
+const _steps = [3, 7];
+const _color = ["info_400", "purple_600"];
+const _backgroundColor = ["gray_100", "blue_100"];
+const _height = [16, 18];
+const _stepWidth = [5, 7];
+const _stepGap = [1, 2];
+const StepsBarStyled = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ $stepGap }) => $stepGap && _stepGap.includes($stepGap) ? $stepGap + "px" : "1px"};
+
+  & > div {
+    width: ${({ $stepWidth }) => $stepWidth && _stepWidth.includes($stepWidth) ? $stepWidth + "px" : "5px"};
+    height: ${({ $height }) => $height && _height.includes($height) ? $height + "px" : "16px"};
+
+    background-color: ${({ $backgroundColor }) => $backgroundColor && _backgroundColor.includes($backgroundColor) ? colors[$backgroundColor] : colors.gray_100};
+
+    &[data-active="true"] {
+      background-color: ${({ $color }) => $color && _color.includes($color) ? colors[$color] : colors.info_400};
+    }
+
+    &:first-child {
+      border-top-left-radius: 2px;
+      border-bottom-left-radius: 2px;
+    }
+
+    &:last-child {
+      border-top-right-radius: 2px;
+      border-bottom-right-radius: 2px;
+    }
+  }
+`;
+const StepsBar = ({
+  value = 1,
+  steps = 7,
+  color = "info_400",
+  backgroundColor = "gray_100",
+  height = 16,
+  stepWidth = 5,
+  stepGap = 1
+}) => {
+  const configure_steps = steps && _steps.includes(steps) ? steps : 7;
+  return /* @__PURE__ */ jsx(
+    StepsBarStyled,
+    {
+      $stepGap: stepGap,
+      $stepWidth: stepWidth,
+      $height: height,
+      $backgroundColor: backgroundColor,
+      $color: color,
+      children: Array.from({ length: configure_steps }).map((_, i) => /* @__PURE__ */ jsx("div", { "data-active": value >= i + 1 }, i))
+    }
+  );
+};
+
+export { StepsBar as default };

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

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

package/build/esm/components/Switch/Switch.js

@@ -0,0 +1,141 @@
+"use strict";
+"use client";
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import styled, { css } from 'styled-components';
+import { colors } from '../../utils';
+
+const variablesSizes = {
+  small: {
+    container: "2px",
+    pill: "12px"
+  },
+  medium: {
+    container: "2px",
+    pill: "16px"
+  },
+  large: {
+    container: "2px",
+    pill: "20px"
+  }
+};
+const sizeStyles = {
+  small: {
+    container: css`
+      width: 28px;
+      height: 16px;
+      padding: 2px;
+    `,
+    pill: css`
+      width: 12px;
+      height: 12px;
+    `
+  },
+  medium: {
+    container: css`
+      width: 32px;
+      height: 20px;
+      padding: 2px;
+    `,
+    pill: css`
+      width: 16px;
+      height: 16px;
+    `
+  },
+  large: {
+    container: css`
+      width: 40px;
+      height: 24px;
+      padding: 2px;
+    `,
+    pill: css`
+      width: 20px;
+      height: 20px;
+    `
+  }
+};
+const SwitchStyled = styled.label`
+  cursor: pointer;
+  background-color: ${colors.gray_100};
+  border-radius: 100px;
+  position: relative;
+  display: block;
+
+  ${({ $size }) => $size && ["small", "medium", "large"].includes($size) ? sizeStyles[$size].container : sizeStyles["medium"].container}
+
+  ${({ $checked, $disabled }) => ($disabled || $checked) && css`
+      background-color: ${$disabled ? $checked ? colors.gray_300 : colors.gray_150 : $checked ? colors.info_700 : colors.gray_100};
+    `}
+
+  &> span {
+    display: block;
+    position: absolute;
+    border-radius: 100px;
+    ${({ $size }) => $size && ["small", "medium", "large"].includes($size) ? sizeStyles[$size].pill : sizeStyles["medium"].pill}
+    background-color: ${({ $checked, $disabled }) => $checked || $disabled ? $disabled ? $checked ? colors.gray_150 : colors.gray_300 : colors.white : colors.info_700};
+    inset-inline-start: var(--switch-inset-inline-start);
+    transition: inset-inline-start 0.2s ease-in-out;
+  }
+
+  & > input {
+    width: 0px;
+    height: 0px;
+    padding: 0px;
+    margin: 0px;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  &:disabled {
+    background-color: ${({ $checked }) => $checked ? colors.info_500_40 : colors.gray_300};
+
+    & > span {
+      background-color: ${({ $checked }) => $checked ? colors.info_500_40 : colors.gray_150};
+    }
+  }
+`;
+const Switch = ({
+  name,
+  id,
+  checked = false,
+  disabled = false,
+  value,
+  onChange = () => {
+  },
+  size = "small",
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxs(
+    SwitchStyled,
+    {
+      $disabled: disabled,
+      $checked: checked,
+      $size: size,
+      htmlFor: id,
+      style: {
+        "--switch-container-padding": variablesSizes[size].container,
+        "--switch-pill-width": variablesSizes[size].pill,
+        "--switch-inset-inline-start": checked ? `calc(100% - var(--switch-pill-width) - var(--switch-container-padding))` : "var(--switch-container-padding)"
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            name,
+            id,
+            disabled,
+            checked,
+            onChange,
+            value,
+            type: "checkbox"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", {})
+      ]
+    }
+  );
+};
+
+export { Switch as default };

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

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