@vygruppen/spor-react 11.3.10 → 12.0.1

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

@@ -0,0 +1,214 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { datepickerAnatomy } from "./anatomy";
+
+export const datePickerSlotRecipe = defineSlotRecipe({
+  slots: datepickerAnatomy.keys(),
+  className: "spor-datepicker",
+  base: {
+    wrapper: {
+      transitionProperty: "box-shadow",
+      transitionDuration: "fast",
+      borderRadius: "sm",
+      display: "flex",
+      flex: 1,
+      paddingY: 0.5,
+      alignItems: "center",
+      _hover: {
+        zIndex: "docked",
+      },
+      _disabled: {
+        pointerEvents: "none",
+        backgroundColor: "surface.disabled",
+        outline: "1px solid",
+        outlineColor: "outline.disabled",
+        color: "text.disabled",
+      },
+      _focusWithin: {
+        outline: "2px solid",
+        outlineColor: "outline.focus",
+      },
+    },
+    inputLabel: {
+      fontSize: "mobile.xs",
+      margin: 0,
+      cursor: "text",
+    },
+    dateTimeSegment: {
+      _focus: {
+        backgroundColor: "ghost.surface.active",
+        color: "text.default",
+      },
+    },
+    box: {
+      width: "100%",
+    },
+
+    calendarTriggerButton: {
+      position: "relative",
+      borderRadius: "xl",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      transitionProperty: "box-shadow, background-color",
+      right: "0.5rem",
+      _hover: {
+        backgroundColor: "ghost.surface.hover",
+      },
+      _active: {
+        backgroundColor: "ghost.surface.active",
+      },
+      _invalid: {
+        outline: "2px solid",
+        outlineColor: "outline.error",
+      },
+    },
+    arrow: {
+      backgroundColor: "surface",
+    },
+    calendarPopover: {
+      color: "core.text",
+      outline: "1px solid",
+      outlineColor: "floating.outline",
+      boxShadow: "md",
+      backgroundColor: "floating.surface",
+    },
+    rangeCalendarPopover: {
+      width: "43rem",
+      maxWidth: "100vw",
+    },
+    weekdays: {
+      color: "core.text",
+      fontWeight: "bold",
+    },
+    weekend: {
+      color: "accent.text",
+      fontWeight: "bold",
+    },
+    cell: {
+      '&[aria-selected="true"] + [aria-selected="true"] > button': {
+        "&::before": {
+          content: '""',
+          display: "block",
+          height: "100%",
+          position: "absolute",
+          left: "-50%",
+          top: 0,
+          bottom: 0,
+          zIndex: -1,
+          backgroundColor: "brand.surface",
+        },
+      },
+    },
+    dateCell: {
+      color: "core.text",
+      borderRadius: "xl",
+      position: "relative",
+      transition: ".1s ease-in-out",
+      userSelect: "none",
+      width: [6, 7],
+      height: [6, 7],
+      transitionProperty: "common",
+
+      _hover: {
+        backgroundColor: "ghost.surface.hover",
+      },
+      _active: {
+        backgroundColor: "ghost.surface.active",
+      },
+      _disabled: {
+        backgroundColor: "surface.disabled",
+        color: "text.disabled",
+        pointerEvents: "none",
+      },
+      _selected: {
+        backgroundColor: "brand.surface",
+        color: "brand.text",
+        _active: {
+          backgroundColor: "brand.surface.active",
+          color: "brand.text",
+        },
+      },
+      "&[data-today]": {
+        outline: "1px solid",
+        outlineColor: "core.outline",
+      },
+      "&[data-unavailable]": {
+        pointerEvents: "none",
+        borderRadius: "xl",
+        backgroundColor: "surface.disabled",
+        color: "text.disabled",
+      },
+    },
+  },
+  variants: {
+    variant: {
+      core: {
+        wrapper: {
+          outline: "1px solid",
+          outlineColor: "core.outline",
+          backgroundColor: "core.surface",
+
+          _hover: {
+            outline: "2px solid",
+
+            outlineColor: "core.outline.hover",
+            _active: {
+              backgroundColor: "ghost.surface.active",
+              outline: "1px solid",
+              outlineColor: "core.outline",
+            },
+          },
+          _invalid: {
+            outline: "2px solid",
+            outlineColor: "outline.error",
+          },
+        },
+      },
+      floating: {
+        wrapper: {
+          backgroundColor: {
+            _light: "bg",
+            _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`,
+          },
+          outline: "1px solid",
+          outlineColor: "floating.outline",
+          boxShadow: "sm",
+
+          _hover: {
+            outline: "1px solid",
+            outlineColor: "floating.outline.hover",
+            _active: {
+              backgroundColor: "ghost.surface.active",
+              outline: "1px solid",
+              outlineColor: "core.outline",
+            },
+          },
+          _invalid: {
+            outline: "2px solid",
+            outlineColor: "outline.error",
+          },
+        },
+      },
+      ghost: {
+        wrapper: {
+          _hover: {
+            outline: "2px solid",
+            outlineColor: "core.outline.hover",
+            _active: {
+              backgroundColor: "ghost.surface.active",
+              outline: "1px solid",
+              outlineColor: "core.outline",
+            },
+          },
+          _invalid: {
+            outline: "2px solid",
+            outlineColor: "outline.error",
+          },
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "core",
+  },
+});

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

@@ -0,0 +1,221 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { dialogAnatomy } from "./anatomy";
+
+export const dialogSlotRecipe = defineSlotRecipe({
+  slots: dialogAnatomy.keys(),
+  className: "spor-dialog",
+  base: {
+    backdrop: {
+      background: "blackAlpha.500",
+      position: "fixed",
+      left: 0,
+      top: 0,
+      width: "100vw",
+      height: "100dvh",
+      zIndex: "modal",
+      _open: {
+        animationName: "fade-in",
+        animationDuration: "slow",
+      },
+      _closed: {
+        animationName: "fade-out",
+        animationDuration: "moderate",
+      },
+    },
+    positioner: {
+      display: "flex",
+      width: "100vw",
+      height: "100dvh",
+      position: "fixed",
+      left: 0,
+      top: 0,
+      "--dialog-z-index": "zIndex.modal",
+      zIndex: "modal",
+      justifyContent: "center",
+      overscrollBehaviorY: "none",
+    },
+    content: {
+      display: "flex",
+      backgroundColor: "bg",
+      flexDirection: "column",
+      position: "relative",
+      width: "full",
+      outline: 0,
+      borderRadius: "lg",
+      marginY: "3.75rem",
+      textStyle: "sm",
+      boxShadow: "lg",
+      _open: {
+        animationDuration: "moderate",
+      },
+      _closed: {
+        animationDuration: "faster",
+      },
+    },
+    header: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      flex: 0,
+      paddingX: "6",
+      paddingTop: "6",
+      paddingBottom: "2",
+    },
+    body: {
+      flex: "1",
+      paddingX: "6",
+      paddingTop: "2",
+      paddingBottom: "4",
+      fontSize: ["xs", null, null, "sm"],
+    },
+    footer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      gap: "3",
+      paddingX: "6",
+      paddingTop: "2",
+      paddingBottom: "4",
+    },
+    title: {
+      fontSize: ["md", null, null, "lg"],
+      fontFamily: "heading",
+      fontWeight: "medium",
+    },
+    closeTrigger: {
+      position: "absolute",
+      top: "2",
+      insetEnd: "2",
+      "& svg": {
+        color: "icon",
+      },
+    },
+  },
+
+  variants: {
+    placement: {
+      center: {
+        positioner: {
+          alignItems: "center",
+        },
+        content: {
+          marginX: "auto",
+        },
+      },
+      top: {
+        positioner: {
+          alignItems: "flex-start",
+        },
+        content: {
+          marginX: "auto",
+        },
+      },
+      bottom: {
+        positioner: {
+          alignItems: "flex-end",
+        },
+        content: {
+          marginX: "auto",
+        },
+      },
+    },
+
+    scrollBehavior: {
+      inside: {
+        positioner: {
+          overflow: "hidden",
+        },
+        content: {
+          maxHeight: "calc(100% - 7.5rem)",
+        },
+        body: {
+          overflow: "auto",
+        },
+      },
+      outside: {
+        positioner: {
+          overflow: "auto",
+          pointerEvents: "auto",
+        },
+      },
+    },
+
+    size: {
+      xs: {
+        content: {
+          maxWidth: "sm",
+        },
+      },
+      sm: {
+        content: {
+          maxWidth: "md",
+        },
+      },
+      md: {
+        content: {
+          maxWidth: "lg",
+        },
+      },
+      lg: {
+        content: {
+          maxWidth: "2xl",
+        },
+      },
+      xl: {
+        content: {
+          maxWidth: "4xl",
+        },
+      },
+      cover: {
+        positioner: {
+          padding: "10",
+        },
+        content: {
+          width: "100%",
+          height: "100%",
+          "--dialog-margin": "0",
+        },
+      },
+    },
+
+    motionPreset: {
+      scale: {
+        content: {
+          _open: { animationName: "scale-in, fade-in" },
+          _closed: { animationName: "scale-out, fade-out" },
+        },
+      },
+      "slide-in-bottom": {
+        content: {
+          _open: { animationName: "slide-from-bottom, fade-in" },
+          _closed: { animationName: "slide-to-bottom, fade-out" },
+        },
+      },
+      "slide-in-top": {
+        content: {
+          _open: { animationName: "slide-from-top, fade-in" },
+          _closed: { animationName: "slide-to-top, fade-out" },
+        },
+      },
+      "slide-in-left": {
+        content: {
+          _open: { animationName: "slide-from-left, fade-in" },
+          _closed: { animationName: "slide-to-left, fade-out" },
+        },
+      },
+      "slide-in-right": {
+        content: {
+          _open: { animationName: "slide-from-right, fade-in" },
+          _closed: { animationName: "slide-to-right, fade-out" },
+        },
+      },
+      none: {},
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    scrollBehavior: "outside",
+    placement: "top",
+    motionPreset: "scale",
+  },
+});

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

@@ -0,0 +1,205 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { drawerAnatomy } from "./anatomy";
+
+export const drawerSlotRecipe = defineSlotRecipe({
+  slots: drawerAnatomy.keys(),
+  className: "spor-drawer",
+  base: {
+    backdrop: {
+      bg: "blackAlpha.500",
+      position: "fixed",
+      insetInlineStart: 0,
+      top: 0,
+      width: "100vw",
+      height: "100dvh",
+      zIndex: "modal",
+      _open: {
+        animationName: "fade-in",
+        animationDuration: "slow",
+      },
+      _closed: {
+        animationName: "fade-out",
+        animationDuration: "slow",
+      },
+    },
+    positioner: {
+      display: "flex",
+      width: "100vw",
+      height: "100dvh",
+      position: "fixed",
+      insetInlineStart: 0,
+      top: 0,
+      zIndex: "modal",
+      overscrollBehaviorY: "none",
+    },
+    content: {
+      display: "flex",
+      flexDirection: "column",
+      background: "bg",
+      position: "relative",
+      width: "100%",
+      outline: 0,
+      zIndex: "modal",
+      maxHeight: "100dvh",
+      color: "inherit",
+      boxShadow: "lg",
+      minHeight: ["50vh", null, null, "auto"],
+      _open: {
+        animationDuration: "slowest",
+        animationTimingFunction: "ease-in-smooth",
+      },
+      _closed: {
+        animationDuration: "slower",
+        animationTimingFunction: "ease-in-smooth",
+      },
+    },
+    header: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      paddingX: "5",
+      paddingBottom: "1",
+    },
+    body: {
+      paddingX: "5",
+      paddingY: ["1", null, null, "2"],
+      flex: "1",
+      overflow: "auto",
+      fontSize: ["xs", null, null, "sm"],
+      minHeight: ["12", null, null, "auto"],
+    },
+    footer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      gap: "3",
+      paddingX: "5",
+      paddingTop: "2",
+    },
+    title: {
+      fontSize: ["sm", null, null, "md"],
+      fontWeight: "semibold",
+      textAlign: "left",
+    },
+    closeTrigger: {
+      position: "absolute",
+      top: "2",
+      insetEnd: "2",
+    },
+  },
+  variants: {
+    size: {
+      xs: {
+        content: {
+          width: "15rem",
+        },
+      },
+      sm: {
+        content: {
+          width: "25rem",
+        },
+      },
+      md: {
+        content: {
+          width: "40rem",
+        },
+      },
+      lg: {
+        content: {
+          width: "56rem",
+        },
+      },
+      xl: {
+        content: {
+          width: "68rem",
+        },
+      },
+      full: {
+        content: {
+          width: "100vw",
+          height: "100vh",
+          borderRadius: "0 !important",
+          paddingBottom: "4",
+        },
+        closeTrigger: {
+          position: "relative",
+        },
+        title: {
+          textAlign: "center",
+        },
+      },
+    },
+
+    placement: {
+      start: {
+        positioner: {
+          justifyContent: "flex-start",
+        },
+        content: {
+          paddingTop: "4",
+          _open: {
+            animationName: {
+              base: "slide-from-left-full, fade-in",
+              _rtl: "slide-from-right-full, fade-in",
+            },
+          },
+          _closed: {
+            animationName: {
+              base: "slide-to-left-full, fade-out",
+              _rtl: "slide-to-right-full, fade-out",
+            },
+          },
+        },
+      },
+
+      end: {
+        positioner: {
+          justifyContent: "flex-end",
+        },
+        content: {
+          paddingTop: "4",
+          _open: {
+            animationName: {
+              base: "slide-from-right-full, fade-in",
+              _rtl: "slide-from-left-full, fade-in",
+            },
+          },
+          _closed: {
+            animationName: {
+              base: "slide-to-right-full, fade-out",
+              _rtl: "slide-to-right-full, fade-out",
+            },
+          },
+        },
+      },
+
+      top: {
+        positioner: {
+          alignItems: "flex-start",
+        },
+        content: {
+          maxW: "100%",
+          marginX: "auto",
+          paddingTop: "4",
+          borderBottomRadius: "lg",
+          _open: { animationName: "slide-from-top-full, fade-in" },
+          _closed: { animationName: "slide-to-top-full, fade-out" },
+        },
+      },
+
+      bottom: {
+        positioner: {
+          alignItems: "flex-end",
+        },
+        content: {
+          maxW: "100%",
+          marginX: "auto",
+          paddingBottom: "4",
+          borderTopRadius: "lg",
+          _open: { animationName: "slide-from-bottom-full, fade-in" },
+          _closed: { animationName: "slide-to-bottom-full, fade-out" },
+        },
+      },
+    },
+  },
+});

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

@@ -0,0 +1,79 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { fieldAnatomy } from "./anatomy";
+
+export const fieldSlotRecipe = defineSlotRecipe({
+  className: "spor-field",
+  slots: fieldAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      width: "100%",
+      position: "relative",
+      flexDirection: "column",
+    },
+    label: {
+      /* For when input is filled */
+      pos: "absolute",
+      paddingX: 3,
+      top: "0.3rem",
+      fontWeight: "normal",
+      fontSize: ["mobile.xs", "desktop.xs"],
+      color: "text",
+      pointerEvents: "none",
+      transition: "position",
+      zIndex: "docked",
+      _peerPlaceholderShown: {
+        /* For when input is not in focus */
+        top: "0.9rem",
+        color: "text",
+        fontSize: ["mobile.sm", "desktop.sm"],
+      },
+      _peerFocusVisible: {
+        /* For when input is in focus */
+        fontSize: ["mobile.xs", "desktop.xs"],
+        color: "text",
+        top: "0.3rem",
+      },
+      _disabled: {
+        opacity: 0.4,
+      },
+    },
+    requiredIndicator: {
+      marginStart: 1,
+      color: "brightRed",
+    },
+    helperText: {
+      marginTop: 2,
+      color: "text.tertiary",
+      lineHeight: "normal",
+      fontSize: "sm",
+    },
+    errorText: {
+      borderRadius: "xs",
+      backgroundColor: "lightRed",
+      color: "darkGrey",
+      paddingX: 1.5,
+      paddingY: 1,
+      textStyle: "xs",
+      width: "fit-content",
+      position: "absolute",
+      bottom: -4,
+      left: 3,
+      zIndex: "dropdown",
+      maxWidth: "50ch",
+      _after: {
+        content: "''",
+        position: "absolute",
+        marginTop: "-0.45em",
+        left: "1em",
+        width: 0,
+        height: 0,
+        transform: "rotate(45deg)",
+        borderLeft: "0.5em solid transparent",
+        borderRight: "0.5em solid transparent",
+        borderBottom: "0.5em solid",
+        borderColor: "lightRed",
+      },
+    },
+  },
+});