@vygruppen/spor-react 11.3.10 → 12.0.0

package/src/theme/slot-recipes/numeric-stepper.ts

@@ -0,0 +1,65 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { numericStepperAnatomy } from "./anatomy";
+
+export const numericStepperRecipe = defineSlotRecipe({
+  slots: numericStepperAnatomy.keys(),
+  className: "spor-numeric-stepper",
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+    },
+    input: {
+      fontSize: "sm",
+      fontWeight: "bold",
+      marginX: 0.5,
+      paddingX: 0.5,
+      borderRadius: "xs",
+      textAlign: "center",
+      transitionProperty: "common",
+      transitionDuration: "fast",
+      color: "core.text",
+      backgroundColor: "transparent",
+
+      _focus: {
+        backgroundColor: "surface",
+        outline: "2px solid",
+        outlineColor: "outline.focus",
+      },
+
+      _active: {
+        backgroundColor: "accent.surface.active",
+      },
+
+      _disabled: {
+        pointerEvents: "none",
+        opacity: 0.5,
+      },
+
+      _hover: {
+        outline: "1px solid",
+        outlineColor: "core.outline",
+      },
+    },
+    text: {
+      fontSize: "sm",
+      fontWeight: "bold",
+      marginX: 1,
+      paddingX: 1,
+      textAlign: "center",
+      width: "4ch",
+      color: "core.text",
+    },
+    button: {
+      border: "0.3rem solid",
+      borderColor: "surface",
+      outlineOffset: "-2px",
+      width: "auto",
+      _icon: {
+        width: "1.2rem",
+        height: "1.2rem",
+      },
+    },
+  },
+});

package/src/theme/slot-recipes/pagination.ts

@@ -0,0 +1,41 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { coreBackground, coreText } from "../utils/core-utils";
+import { ghostBackground } from "../utils/ghost-utils";
+import { paginationAnatomy } from "./anatomy";
+
+export const paginationSlotRecipe = defineSlotRecipe({
+  slots: paginationAnatomy.keys(),
+  className: "spor-pagination",
+  base: {
+    item: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      height: "5",
+      width: "5",
+      fontSize: "xs",
+      borderRadius: "xl",
+      ...coreText("default"),
+      cursor: "pointer",
+      ...coreBackground("default"),
+      _hover: {
+        ...ghostBackground("hover"),
+        _active: {
+          ...ghostBackground("active"),
+        },
+      },
+      _selected: {
+        cursor: "default",
+        fontWeight: "bold",
+        backgroundColor: "core.surface.active",
+      },
+    },
+    list: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: ["0.5", null, null, "1"],
+      listStyle: "none",
+    },
+  },
+});

package/src/theme/slot-recipes/popover.ts

@@ -0,0 +1,78 @@
+import { surface } from "./../utils/surface-utils";
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { popoverAnatomy } from "./anatomy";
+
+export const popoverSlotRecipe = defineSlotRecipe({
+  className: "spor-popover",
+  slots: popoverAnatomy.keys(),
+  base: {
+    content: {
+      position: "relative",
+      display: "flex",
+      flexDirection: "row-reverse",
+      gap: "0.625rem",
+      padding: "0.563rem 0.75rem",
+
+      textStyle: "sm",
+      bg: "surface.tertiary",
+      boxShadow: "lg",
+      borderRadius: "sm",
+      zIndex: "popover",
+      outline: "0",
+
+      transformOrigin: "var(--transform-origin)",
+      maxHeight: "var(--available-height)",
+      _open: {
+        animationStyle: "scale-fade-in",
+        animationDuration: "fast",
+      },
+      _closed: {
+        animationStyle: "scale-fade-out",
+        animationDuration: "faster",
+      },
+    },
+    body: {
+      color: "text.inverted",
+
+      alignItems: "center",
+      borderRadius: "sm",
+      zIndex: "inherit",
+      maxWidth: "20em",
+    },
+    arrow: {
+      "--arrow-background": "colors.surface.tertiary",
+      "--arrow-size": "6px",
+    },
+  },
+  variants: {
+    size: {
+      sm: {
+        body: {
+          maxWidth: "8rem",
+          minWidth: "8rem",
+        },
+      },
+      md: {
+        body: {
+          maxWidth: "13rem",
+          minWidth: "13rem",
+        },
+        content: {
+          padding: "0.875rem 0.75rem 1.125rem 1.125rem",
+        },
+      },
+      lg: {
+        body: {
+          maxWidth: "26rem",
+          minWidth: "26rem",
+        },
+        content: {
+          padding: "0.875rem 0.75rem 1.125rem 1.125rem",
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "sm",
+  },
+});

package/src/theme/slot-recipes/progress-bar.ts

@@ -0,0 +1,39 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { progressBarAnotomy } from "./anatomy";
+
+export const progressBarRecipe = defineSlotRecipe({
+  slots: progressBarAnotomy.keys(),
+  base: {
+    container: {
+      minWidth: "100px",
+    },
+    background: {
+      display: "flex",
+      backgroundColor: "accent.surface.hover",
+      borderRadius: "sm",
+      boxPack: "start",
+      justifyContent: "flex-start",
+      marginX: "auto",
+    },
+
+    disabledBackground: {
+      backgroundColor: "icon.disabled",
+      borderRadius: "sm",
+    },
+    progress: {
+      backgroundColor: "brand.surface.active",
+      borderRadius: "sm",
+      maxWidth: "100%",
+      transition: "width .2s ease-out",
+    },
+
+    description: {
+      display: "flex",
+      justifyContent: "center",
+      textAlign: "center",
+      marginTop: 2,
+      marginInline: "auto",
+      fontWeight: "bold",
+    },
+  },
+});

package/src/theme/slot-recipes/progress-indicator.ts

@@ -0,0 +1,22 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+
+export const progressIndicatorRecipe = defineSlotRecipe({
+  slots: ["root", "container", "progressDot", "circle"],
+  base: {
+    root: {},
+    container: {
+      display: "flex",
+      alignItems: "center",
+      gap: 1,
+      justifyContent: ["space-between", "center"],
+    },
+    progressDot: {
+      height: 1,
+      width: 1,
+      fill: "icon.disabled",
+      "&[aria-current='step']": {
+        fill: "brand.surface",
+      },
+    },
+  },
+});

package/src/theme/slot-recipes/radio-card.ts

@@ -0,0 +1,112 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { coreBackground, coreBorder, coreText } from "../utils/core-utils";
+import { floatingBackground, floatingBorder } from "../utils/floating-utils";
+import { outlineBorder } from "../utils/outline-utils";
+import { radioCardAnatomy } from "./anatomy";
+import tokens from "@vygruppen/spor-design-tokens";
+
+export const radioCardSlotRecipe = defineSlotRecipe({
+  className: "spor-radio-card",
+  slots: radioCardAnatomy.keys(),
+  base: {
+    item: {
+      flex: 1,
+      overflow: "hidden",
+      fontSize: "inherit",
+      display: "block",
+      cursor: "pointer",
+      borderRadius: "sm",
+      transitionProperty: "common",
+      transitionDuration: "fast",
+
+      _focusVisible: {
+        outlineWidth: "2px",
+        outlineColor: "outline.focus",
+        outlineStyle: "solid",
+        outlineOffset: "1px",
+      },
+
+      _disabled: {
+        outline: "none",
+        pointerEvents: "none",
+        background: "surface.disabled",
+        color: "text.disabled",
+      },
+    },
+    label: {
+      userSelect: "none",
+      _disabled: { opacity: 0.4 },
+      fontWeight: "bold",
+      fontSize: "inherit",
+    },
+  },
+  variants: {
+    variant: {
+      core: {
+        item: {
+          outlineColor: "core.outline",
+          outlineWidth: tokens.size.stroke.sm,
+          outlineStyle: "solid",
+          backgroundColor: "core.surface",
+
+          _hover: {
+            outlineColor: "core.outline.hover",
+            outlineWidth: tokens.size.stroke.md,
+            outlineStyle: "solid",
+            _active: {
+              backgroundColor: "core.surface.active",
+              outlineWidth: tokens.size.stroke.sm,
+            },
+          },
+          _checked: {
+            outlineColor: "outline.focus",
+            outlineWidth: tokens.size.stroke.md,
+            outlineStyle: "solid",
+            backgroundColor: "core.surface.active",
+            _focusVisible: {
+              outlineStyle: "double",
+              outlineWidth: `calc(3 * ${tokens.size.stroke.md})`, // space for double outline
+            },
+          },
+        },
+      },
+      floating: {
+        item: {
+          boxShadow: "0px 1px 3px 0px var(--shadow-color)",
+          shadowColor: "surface.disabled",
+
+          border: "sm",
+          borderColor: "floating.outline",
+
+          background: "floating.surface",
+          _hover: {
+            background: "floating.surface.hover",
+
+            borderColor: "floating.outline.hover",
+
+            boxShadow: "0px 2px 6px 0px var(--shadow-color)",
+            _active: {
+              background: "floating.surface.active",
+              borderColor: "floating.outline.active",
+              boxShadow: "none",
+            },
+          },
+          _checked: {
+            outlineColor: "outline.focus",
+            outlineWidth: tokens.size.stroke.md,
+            outlineStyle: "solid",
+            backgroundColor: "core.surface.active",
+
+            _focusVisible: {
+              outlineStyle: "double",
+              outlineWidth: `calc(3 * ${tokens.size.stroke.md})`, // space for double outline
+            },
+          },
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "core",
+  },
+});

package/src/theme/slot-recipes/radio.ts

@@ -0,0 +1,80 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { radioAnatomy } from "./anatomy";
+
+export const radioGroupSlotRecipe = defineSlotRecipe({
+  className: "spor-radio",
+  slots: radioAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      gap: 2,
+    },
+    item: {
+      display: "flex",
+      alignItems: "center",
+      position: "relative",
+      gap: "1.5",
+      cursor: "pointer",
+      _disabled: {
+        cursor: "disabled",
+      },
+    },
+    label: {
+      userSelect: "none",
+      _disabled: {
+        color: "text.disabled",
+      },
+    },
+    itemText: {
+      _disabled: {
+        color: "text.disabled",
+      },
+    },
+    itemControl: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      verticalAlign: "top",
+      borderWidth: "2px",
+      borderColor: "core.outline",
+      borderRadius: "xl",
+      width: 4,
+      height: 4,
+
+      _checked: {
+        borderColor: "brand.surface",
+      },
+      _hover: {
+        borderColor: "brand.surface.hover",
+        "& .dot": {
+          backgroundColor: "brand.surface.hover",
+        },
+      },
+
+      _disabled: {
+        pointerEvents: "none",
+        backgroundColor: "surface.disabled",
+        borderColor: "outline.disabled",
+        "& .dot": {
+          backgroundColor: "outline.disabled",
+        },
+      },
+      "& .dot": {
+        height: "full",
+        width: "full",
+        borderRadius: "xl",
+        backgroundColor: "brand.surface",
+        scale: "0.5",
+      },
+    },
+  },
+  variants: {
+    orientation: {
+      vertical: {
+        root: {
+          flexDirection: "column",
+        },
+      },
+    },
+  },
+});

package/src/theme/slot-recipes/select.ts

@@ -0,0 +1,243 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { selectAnatomy } from "./anatomy";
+
+export const selectSlotRecipe = defineSlotRecipe({
+  slots: selectAnatomy.keys(),
+  className: "spor-select",
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      position: "relative",
+      cursor: "pointer",
+      zIndex: "dropdown",
+      "& [data-state='open']": {
+        "& + label": {
+          transform: ["scale(0.825) translateY(-10px)"],
+        },
+      },
+      "&:has(button span:not(:empty))": {
+        "& label": {
+          transform: ["scale(0.825) translateY(-10px)"],
+        },
+      },
+    },
+    label: {
+      fontSize: ["mobile.sm", "desktop.sm"],
+      top: 0,
+      left: 3,
+      zIndex: 0,
+      position: "absolute",
+      marginY: 2,
+      transitionProperty: "transform",
+      transitionDuration: "fast",
+      transformOrigin: "top left",
+      transitionDelay: "3ms",
+      pointerEvents: "none",
+    },
+    trigger: {
+      display: "flex",
+      appearance: "none",
+      width: "100%",
+      height: 8,
+      paddingY: 1.5,
+      paddingX: 3,
+      justifyContent: "space-between",
+      alignItems: "center",
+      fontSize: "mobile.md",
+      borderRadius: "sm",
+      cursor: "pointer",
+
+      _open: {
+        "& + div": {
+          transform: "rotate(180deg)",
+        },
+      },
+    },
+    indicatorGroup: {
+      display: "flex",
+      alignItems: "center",
+      gap: "1",
+      position: "absolute",
+      right: "0",
+      top: "0",
+      bottom: "0",
+      paddingX: 2,
+      pointerEvents: "none",
+    },
+    indicator: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: {
+        base: "text",
+        _disabled: "text.disabled",
+        _invalid: "text.secondary",
+      },
+      _icon: {
+        width: 3,
+        height: 3,
+      },
+    },
+    selectContent: {
+      backgroundColor: "surface",
+      boxShadow: "sm",
+      overflowY: "auto",
+      maxHeight: "50vh",
+      width: "100%",
+      listStyle: "none",
+      borderBottomRadius: "sm",
+      marginTop: -1,
+
+      _open: {
+        animationStyle: "slide-fade-in",
+        animationDuration: "fast",
+        zIndex: "popover",
+      },
+      _closed: {
+        animationStyle: "slide-fade-out",
+        animationDuration: "fastest",
+      },
+    },
+    item: {
+      paddingX: 2,
+      paddingY: 2,
+      marginY: 1,
+      marginX: 1,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: 1,
+      borderRadius: "sm",
+      color: "ghost.text",
+      cursor: "pointer",
+      outline: "none",
+
+      _active: {
+        backgroundColor: "ghost.surface.active",
+        color: "green",
+      },
+      _highlighted: {
+        _active: {
+          color: "text",
+        },
+      },
+      _hover: {
+        backgroundColor: "ghost.surface.hover",
+        outline: "2px solid core.outline",
+        outlineOffset: "2px",
+      },
+      _selected: {
+        backgroundColor: "ghost.surface.active",
+      },
+      _icon: {
+        width: 3,
+        height: 3,
+      },
+    },
+    control: {
+      position: "relative",
+      borderTopRadius: "sm",
+      borderBottomRadius: "sm",
+      _active: {
+        backgroundColor: "transparent",
+      },
+      _open: {
+        borderBottomRadius: 0,
+      },
+    },
+    itemText: {
+      flex: "1",
+    },
+    itemGroup: {
+      _first: { mt: "0" },
+    },
+    itemGroupLabel: {
+      py: "1",
+      fontWeight: "medium",
+    },
+    valueText: {},
+    itemDescription: {
+      fontSize: ["mobile.xs", "desktop.xs"],
+      color: "ghost.text",
+      "[aria-selected='true'] &": {
+        color: "ghost.text",
+      },
+    },
+  },
+  variants: {
+    variant: {
+      core: {
+        control: {
+          outline: "1px solid",
+          outlineColor: "core.outline",
+          _hover: {
+            outline: "2px solid",
+            outlineColor: "core.outline",
+          },
+          _active: {
+            backgroundColor: "brand.surface.active",
+          },
+          _invalid: {
+            outline: "2px solid",
+            outlineColor: "outline.error",
+          },
+          _disabled: {
+            pointerEvents: "none",
+            color: "text.disabled",
+            backgroundColor: "surface.disabled",
+          },
+        },
+      },
+      floating: {
+        control: {
+          backgroundColor: {
+            _light: "bg",
+            _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`,
+          },
+          outline: "1px solid",
+          outlineColor: "floating.outline",
+          _hover: {
+            outline: "1px solid",
+            outlineColor: "floating.outline.hover",
+            backgroundColor: {
+              _light: "floating.surface.hover",
+              _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`,
+            },
+          },
+          _active: {
+            outline: "1px solid",
+            outlineColor: "floating.outline.active",
+            backgroundColor: "floating.surface.active",
+          },
+        },
+        selectContent: {
+          outline: "1px solid",
+          outlineColor: "floating.outline",
+        },
+      },
+      rightSideSquare: {
+        control: {
+          outline: "1px solid",
+          outlineColor: "core.outline",
+        },
+        trigger: {
+          _focus: {
+            borderRightRadius: "none",
+          },
+        },
+      },
+      leftSideSquare: {
+        control: {
+          outline: "1px solid",
+          outlineColor: "core.outline",
+        },
+        trigger: {
+          _focus: {
+            borderLeftRadius: "none",
+          },
+        },
+      },
+    },
+  },
+});