@vygruppen/spor-react 11.3.10 → 12.0.0

package/src/theme/components/radio-card.ts

@@ -1,134 +0,0 @@
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
-import { floatingBackground, floatingBorder } from "../utils/floating-utils";
-import { anatomy } from "@chakra-ui/theme-tools";
-import { outlineBorder } from "../utils/outline-utils";
-
-const parts = anatomy("radio-card").parts(
-  "container",
-  "checked",
-  "radioInput",
-  "focused",
-  "focusedChecked",
-);
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props: any) => ({
-    container: {
-      overflow: "hidden",
-      fontSize: "inherit",
-      display: "block",
-      cursor: "pointer",
-      borderRadius: "sm",
-      transitionProperty: "common",
-      transitionDuration: "fast",
-
-      _disabled: {
-        pointerEvents: "none",
-        ...baseBackground("disabled", props),
-        ...baseBorder("disabled", props),
-        ...baseText("disabled", props),
-      },
-    },
-    checked: {
-      outline: "2px solid",
-      ...outlineBorder("focus", props),
-      ...floatingBackground("active", props),
-    },
-    radioInput: {
-      appearance: "none",
-      position: "absolute",
-      opacity: 0,
-      zIndex: -1,
-    },
-  }),
-  variants: {
-    base: (props) => ({
-      container: {
-        ...baseText("default", props),
-        ...baseBackground("default", props),
-        ...baseBorder("default", props),
-        _hover: {
-          ...baseBackground("hover", props),
-          ...baseBorder("hover", props),
-        },
-        _active: {
-          ...baseBackground("active", props),
-          ...baseBorder("active", props),
-        },
-      },
-      checked: {
-        _hover: {
-          ...baseBorder("hover", props),
-        },
-        _active: {
-          ...baseBackground("active", props),
-          ...baseBorder("active", props),
-        },
-      },
-      focusedChecked: {
-        outline: "4px solid",
-        outlineStyle: "double",
-        ...outlineBorder("focus", props),
-        outlineOffset: "-1px",
-      },
-      focused: {
-        outline: "2px solid",
-        ...outlineBorder("focus", props),
-        outlineOffset: "1px",
-        boxShadow: `inset 0 0 0 1px rgba(0, 0, 0, 0.40)`,
-        _hover: {
-          ...baseBorder("hover", props),
-          boxShadow: "none",
-          outlineOffset: "0px",
-        },
-      },
-    }),
-    floating: (props) => ({
-      container: {
-        ...floatingBackground("default", props),
-        ...floatingBorder("default", props),
-        boxShadow: "sm",
-        _hover: {
-          ...floatingBackground("hover", props),
-          ...floatingBorder("hover", props),
-          boxShadow: "md",
-        },
-        _active: {
-          ...floatingBackground("active", props),
-          ...floatingBorder("active", props),
-        },
-      },
-      checked: {
-        _hover: {
-          ...floatingBorder("hover", props),
-          boxShadow: "md",
-        },
-        _active: {
-          ...floatingBackground("active", props),
-          ...floatingBorder("active", props),
-        },
-      },
-      focusedChecked: {
-        outline: "4px solid",
-        outlineStyle: "double",
-        ...outlineBorder("focus", props),
-        outlineOffset: "-1px",
-      },
-      focused: {
-        outline: "2px solid",
-        ...outlineBorder("focus", props),
-        outlineOffset: "1px",
-        boxShadow: `inset 0 0 0 1px rgba(0, 0, 0, 0.10)`,
-        _hover: {
-          ...floatingBorder("hover", props),
-          boxShadow: "md",
-          outlineOffset: "0px",
-        },
-      },
-    }),
-  },
-});
-
-export default config;

package/src/theme/components/radio.ts

@@ -1,68 +0,0 @@
-import { radioAnatomy as parts } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { mode } from "@chakra-ui/theme-tools";
-import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
-import { brandBackground, brandText } from "../utils/brand-utils";
-import { focusVisibleStyles } from "../utils/focus-utils";
-
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props) => ({
-    container: {
-      _hover: {
-        "input:enabled + .chakra-radio__control": {
-          backgroundColor: "inherit",
-          borderColor: mode("text.default.light", "text.default.dark")(props),
-        },
-        "input:enabled:checked + .chakra-radio__control": {
-          color: brandBackground("hover", props).backgroundColor,
-          borderColor: brandBackground("hover", props).backgroundColor,
-        },
-      },
-    },
-    label: {
-      userSelect: "none",
-      _disabled: { opacity: 0.4 },
-    },
-    control: {
-      width: 4,
-      height: 4,
-      backgroundColor: "inherit",
-      border: "2px solid",
-      borderColor: baseBorder("default", props).outlineColor,
-      borderRadius: "50%",
-
-      ...focusVisibleStyles(props),
-
-      _disabled: {
-        ...baseBackground("disabled", props),
-        ...baseBorder("disabled", props),
-        ...baseText("disabled", props),
-      },
-      _checked: {
-        color: mode(
-          "brand.surface.default.light",
-          "brand.surface.default.dark",
-        )(props),
-        borderColor: "currentColor",
-        _before: {
-          content: `""`,
-          display: "inline-block",
-          position: "relative",
-          width: "50%",
-          height: "50%",
-          borderRadius: "50%",
-          background: "currentColor",
-        },
-        _disabled: {
-          pointerEvents: "none",
-          ...baseBackground("disabled", props),
-          ...baseBorder("disabled", props),
-          ...baseText("disabled", props),
-        },
-      },
-    },
-  }),
-});
-export default config;

package/src/theme/components/select.ts

@@ -1,74 +0,0 @@
-import { selectAnatomy } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { mode } from "@chakra-ui/theme-tools";
-import { baseText } from "../utils/base-utils";
-import { default as Input } from "./input";
-import { inputBaseStyle, inputVariant } from "../utils/input-utils";
-
-const parts = selectAnatomy.extend("root");
-
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props) => ({
-    root: {
-      width: "100%",
-      height: "fit-content",
-      position: "relative",
-      "& + label": {
-        fontSize: ["mobile.sm", "desktop.sm"],
-        top: "0.2rem",
-        left: 3,
-        zIndex: 2,
-        position: "absolute",
-        marginY: 2,
-        transformOrigin: "top left",
-        transform: [
-          "scale(0.825) translateY(-12px)",
-          "scale(0.825) translateY(-14px)",
-        ],
-      },
-      "& option, & optgroup": {
-        color: mode("text.default.light", "text.default.dark")(props),
-        backgroundColor: mode(
-          "surface.default.light",
-          "surface.default.dark",
-        )(props),
-      },
-    },
-    field: {
-      ...inputBaseStyle(props).field,
-      appearance: "none",
-      paddingTop: "1rem",
-    },
-    icon: {
-      width: 5,
-      height: 5,
-      insetEnd: "0.5rem",
-      position: "relative",
-      color: "currentColor",
-      strokeLinecap: "round",
-      fontSize: "sm",
-      _disabled: {
-        ...baseText("disabled", props),
-      },
-    },
-  }),
-  variants: {
-    base: (props) => ({
-      field: {
-        ...inputVariant("base", props),
-      },
-    }),
-    floating: (props) => ({
-      field: {
-        ...inputVariant("floating", props),
-      },
-    }),
-  },
-  defaultProps: {
-    variant: "base",
-  },
-});
-
-export default config;

package/src/theme/components/skeleton.ts

@@ -1,40 +0,0 @@
-import { defineStyleConfig } from "@chakra-ui/react";
-import { keyframes } from "@chakra-ui/system";
-import { cssVar, getColor, mode } from "@chakra-ui/theme-tools";
-
-const fade = (startColor: string, endColor: string) =>
-  keyframes({
-    from: { borderColor: startColor, background: startColor },
-    to: { borderColor: endColor, background: endColor },
-  });
-
-const $startColor = cssVar("skeleton-start-color");
-const $endColor = cssVar("skeleton-end-color");
-
-const config = defineStyleConfig({
-  baseStyle: (props) => {
-    const defaultStartColor = mode("blackAlpha.300", "whiteAlpha.300")(props);
-    const defaultEndColor = mode("blackAlpha.100", "whiteAlpha.100")(props);
-
-    const {
-      startColor = defaultStartColor,
-      endColor = defaultEndColor,
-      speed,
-      theme,
-    } = props;
-
-    const start = getColor(theme, startColor);
-    const end = getColor(theme, endColor);
-
-    return {
-      [$startColor.variable]: start,
-      [$endColor.variable]: end,
-      opacity: 1,
-      borderRadius: "xs",
-      borderColor: start,
-      background: end,
-      animation: `${speed}s linear infinite alternate ${fade(start, end)}`,
-    };
-  },
-});
-export default config;

package/src/theme/components/static-card.ts

@@ -1,82 +0,0 @@
-import { Theme, defineStyleConfig } from "@chakra-ui/react";
-import { colors } from "../foundations";
-import { focusVisibleStyles } from "../utils/focus-utils";
-import { floatingBackground } from "../utils/floating-utils";
-import { mode } from "@chakra-ui/theme-tools";
-
-const config = defineStyleConfig({
-  baseStyle: (props: any) => ({
-    appearance: "none",
-    border: "none",
-    overflow: "hidden",
-    fontSize: "inherit",
-    display: "block",
-    borderRadius: "md",
-    color: "text.default.light",
-    ...focusVisibleStyles(props),
-    ...getColorSchemeBaseProps(props),
-  }),
-});
-
-export default config;
-
-type CardThemeProps = {
-  colorScheme:
-    | "white"
-    | "grey"
-    | "green"
-    | "orange"
-    | "red"
-    | "yellow"
-    | "blue"
-    | "darkBlue"
-    | "darkGreen"
-    | "darkYellow";
-  theme: Theme;
-  colorMode: "light" | "dark";
-};
-
-const getColorSchemeBaseProps = (props: CardThemeProps) => {
-  switch (props.colorScheme) {
-    case "white":
-      return {
-        ...floatingBackground("default", props),
-        color: mode("text.default.light", "text.default.dark")(props),
-      };
-    case "grey":
-      return {
-        backgroundColor: "lightGrey",
-      };
-    case "green": {
-      return {
-        backgroundColor: "seaMist",
-      };
-    }
-    case "red": {
-      return {
-        backgroundColor: "pink",
-      };
-    }
-    case "darkBlue": {
-      return {
-        backgroundColor: "darkBlue",
-        color: "white",
-      };
-    }
-    case "darkGreen": {
-      return {
-        backgroundColor: "pine",
-        color: "white",
-      };
-    }
-    case "darkYellow": {
-      return {
-        backgroundColor: "banana",
-      };
-    }
-    default:
-      return {
-        backgroundColor: colors[props.colorScheme]?.[100] ?? "default",
-      };
-  }
-};

package/src/theme/components/stepper.ts

@@ -1,100 +0,0 @@
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { anatomy, mode } from "@chakra-ui/theme-tools";
-import { baseText } from "../utils/base-utils";
-import { brandBackground, brandText } from "../utils/brand-utils";
-import { accentText, accentBackground } from "../utils/accent-utils";
-
-const parts = anatomy("stepper").parts(
-  "root",
-  "container",
-  "innerContainer",
-  "title",
-  "stepCounter",
-  "stepContainer",
-  "stepButton",
-  "stepNumber",
-  "stepTitle",
-  "closeButton",
-);
-
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: {
-    root: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: ["space-between", null, "center"],
-      minHeight: ["48px", null, "60px"],
-      overflowX: "auto",
-      width: "100%",
-    },
-    container: {
-      paddingX: [2, null, null, 0],
-      maxWidth: "container.lg",
-      marginX: "auto",
-      width: "100%",
-    },
-    innerContainer: {
-      overflow: "hidden",
-      display: ["flex", null, "none"],
-      alignItems: "center",
-      justifyContent: "space-between",
-      gap: 3,
-    },
-    title: {
-      overflow: "hidden",
-      fontWeight: "bold",
-      WebkitLineClamp: 2,
-      display: "-webkit-box",
-      WebkitBoxOrient: "vertical",
-      textAlign: "center",
-      maxWidth: "80%",
-    },
-    stepContainer: {
-      display: "flex",
-      alignItems: "center",
-    },
-    stepTitle: {
-      textStyle: "sm",
-      whiteSpace: "nowrap",
-    },
-  },
-  variants: {
-    base: () => ({
-      root: {
-        backgroundColor: "transparent",
-      },
-    }),
-    accent: (props) => ({
-      root: {
-        backgroundColor: mode("accent.bg.light", "accent.bg.dark")(props),
-        ...accentText("default", props),
-      },
-      stepButton: {
-        color:
-          props.state === "disabled"
-            ? baseText("disabled", props).color
-            : props.state === "completed"
-              ? baseText("default", props).color
-              : brandText("default", props).color,
-        _hover: {
-          backgroundColor:
-            props.state === "disabled"
-              ? "transparent"
-              : accentBackground("hover", props).backgroundColor,
-        },
-      },
-      backButton: {
-        _hover: {
-          ...brandBackground("hover", props),
-        },
-      },
-    }),
-  },
-  defaultProps: {
-    variant: "base",
-  },
-});
-
-export default config;

package/src/theme/components/switch.ts

@@ -1,112 +0,0 @@
-import { switchAnatomy as parts } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { calc, cssVar, mode } from "@chakra-ui/theme-tools";
-import { baseBackground, baseBorder } from "../utils/base-utils";
-import { brandBackground } from "../utils/brand-utils";
-import { focusVisibleStyles } from "../utils/focus-utils";
-
-const $width = cssVar("switch-track-width");
-const $height = cssVar("switch-track-height");
-const $diff = cssVar("switch-track-diff");
-const diffValue = calc.subtract($width, $height);
-const $translateX = cssVar("switch-thumb-x");
-
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props) => ({
-    container: {
-      [$diff.variable]: diffValue,
-      [$translateX.variable]: $diff.reference,
-      _rtl: {
-        [$translateX.variable]: calc($diff).negate().toString(),
-      },
-    },
-    track: {
-      width: [$width.reference],
-      height: [$height.reference],
-      transitionProperty: "common",
-      transitionDuration: "fast",
-      ...baseBorder("default", props),
-      ...focusVisibleStyles(props),
-      ...baseBackground("default", props),
-
-      _hover: {
-        ...baseBorder("hover", props),
-      },
-      _checked: {
-        ...brandBackground("default", props),
-        outlineColor: "transparent",
-
-        _hover: {
-          ...baseBackground("default", props),
-          ...brandBackground("hover", props),
-        },
-      },
-      _disabled: {
-        pointerEvents: "none",
-        ...baseBackground("default", props),
-        ...baseBorder("disabled", props),
-        _checked: {
-          ...baseBackground("disabled", props),
-          ...baseBorder("disabled", props),
-        },
-      },
-    },
-    thumb: {
-      transitionProperty: "transform",
-      transitionDuration: "normal",
-      borderRadius: "50%",
-      width: [$height.reference],
-      height: [$height.reference],
-
-      backgroundColor: mode("base.icon.light", "base.icon.dark")(props),
-      "[data-disabled] &": {
-        backgroundColor: mode(
-          "icon.disabled.light",
-          "icon.disabled.dark",
-        )(props),
-      },
-      _checked: {
-        backgroundColor: mode("brand.icon.light", "brand.icon.dark")(props),
-        transform: `translateX(${$translateX.reference})`,
-      },
-    },
-  }),
-  sizes: {
-    sm: {
-      container: {
-        [$width.variable]: "54px",
-        [$height.variable]: "24px",
-      },
-      track: {
-        borderRadius: "24px",
-        padding: "2px",
-      },
-    },
-    md: {
-      container: {
-        [$width.variable]: "66px",
-        [$height.variable]: "30px",
-      },
-      track: {
-        borderRadius: "30px",
-        padding: "3px",
-      },
-    },
-    lg: {
-      container: {
-        [$width.variable]: "78px",
-        [$height.variable]: "36px",
-      },
-      track: {
-        borderRadius: "36px",
-        padding: "3px",
-      },
-    },
-  },
-  defaultProps: {
-    size: "md",
-  },
-});
-export default config;