@vygruppen/spor-react 12.2.0 → 12.3.0

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

@@ -12,33 +12,6 @@ export const fieldSlotRecipe = defineSlotRecipe({
       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",
@@ -58,7 +31,7 @@ export const fieldSlotRecipe = defineSlotRecipe({
       textStyle: "xs",
       width: "fit-content",
       position: "absolute",
-      bottom: -4,
+      bottom: -5,
       left: 3,
       zIndex: "dropdown",
       maxWidth: "50ch",

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

@@ -4,6 +4,7 @@ import { alertExpandableSlotRecipe } from "./alert-expandable";
 import { alertServiceSlotRecipe } from "./alert-service";
 import { breadcrumbSlotRecipe } from "./breadcrumb";
 import { checkboxSlotRecipe } from "./checkbox";
+import { choiceChipSlotRecipe } from "./choice-chip";
 import { datePickerSlotRecipe } from "./datepicker";
 import { dialogSlotRecipe } from "./dialog";
 import { drawerSlotRecipe } from "./drawer";
@@ -62,4 +63,5 @@ export const slotRecipes = {
   tabs: tabsSlotRecipe,
   travelTag: travelTagSlotRecipe,
   toast: toastSlotRecipe,
+  checkboxCard: choiceChipSlotRecipe,
 };

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

@@ -7,16 +7,21 @@ export const numericStepperRecipe = defineSlotRecipe({
   className: "spor-numeric-stepper",
   base: {
     root: {
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
+      "& > div": {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+      },
     },
     input: {
       fontSize: "sm",
       fontWeight: "bold",
       marginX: 0.5,
+      padding: 0,
       paddingX: 0.5,
       borderRadius: "xs",
+      outline: "none",
+      height: "auto",
       textAlign: "center",
       transitionProperty: "common",
       transitionDuration: "fast",

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

@@ -146,6 +146,10 @@ export const selectSlotRecipe = defineSlotRecipe({
       _open: {
         borderBottomRadius: 0,
       },
+      _invalid: {
+        outline: "2px solid",
+        outlineColor: "outline.error",
+      },
     },
     itemText: {
       flex: "1",
@@ -179,10 +183,6 @@ export const selectSlotRecipe = defineSlotRecipe({
           _active: {
             backgroundColor: "brand.surface.active",
           },
-          _invalid: {
-            outline: "2px solid",
-            outlineColor: "outline.error",
-          },
           _disabled: {
             pointerEvents: "none",
             color: "text.disabled",

package/src/input/InputGroup.tsx

@@ -1,67 +0,0 @@
-"use client";
-
-import type { GroupProps, InputElementProps } from "@chakra-ui/react";
-import { Group, InputElement } from "@chakra-ui/react";
-import * as React from "react";
-
-import { FieldLabel } from "./Field";
-
-export type InputGroupProps = GroupProps & {
-  startElementProps?: InputElementProps;
-  endElementProps?: InputElementProps;
-  startElement?: React.ReactNode;
-  endElement?: React.ReactNode;
-  children: React.ReactElement;
-  label?: string;
-};
-
-/**
- *
- * InputGroup is a wrapper for inputs that have a startElement and/or endElement.
- *
- * It is not exported to users, but used internally in the Input component.
- *
- */
-
-export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
-  (props, ref) => {
-    const {
-      startElement,
-      startElementProps,
-      endElement,
-      endElementProps,
-      label,
-      children,
-      ...rest
-    } = props;
-
-    return (
-      <Group ref={ref} {...rest}>
-        {startElement && (
-          <InputElement
-            pointerEvents="none"
-            paddingX={2}
-            {...startElementProps}
-          >
-            {startElement}
-          </InputElement>
-        )}
-        {React.cloneElement(children, {
-          ...children.props,
-        })}
-        {label && (
-          <FieldLabel left={startElement ? 4 : "0"} right={endElement ? 4 : 0}>
-            {label}
-          </FieldLabel>
-        )}
-
-        {endElement && (
-          <InputElement placement="end" paddingX={2} {...endElementProps}>
-            {endElement}
-          </InputElement>
-        )}
-      </Group>
-    );
-  },
-);
-InputGroup.displayName = "InputGroup";

package/src/theme/recipes/choice-chip.ts

@@ -1,144 +0,0 @@
-import { defineRecipe } from "@chakra-ui/react";
-
-export const choiceChipRecipe = defineRecipe({
-  base: {
-    display: "inline-flex",
-    alignItems: "center",
-    boxAlign: "center",
-    fontSize: "xs",
-    cursor: "pointer",
-    transitionProperty: "all",
-    borderRadius: "xl",
-    transitionDuration: "fast",
-    height: 6,
-    paddingInlineStart: "2",
-    paddingInlineEnd: "2",
-
-    outline: "1px solid",
-    outlineColor: "base.outline",
-    _checked: {
-      backgroundColor: "brand.surface",
-      borderRadius: "sm",
-      outline: "none",
-      color: "brand.text",
-      _hover: {
-        backgroundColor: "brand.surface.hover",
-        _active: {
-          backgroundColor: "brand.surface.active",
-        },
-      },
-    },
-
-    _focusVisible: {
-      outline: "2px solid",
-      outlineColor: "outline.focus",
-      outlineOffset: "1px",
-    },
-
-    _disabled: {
-      pointerEvents: "none",
-      boxShadow: "none",
-      backgroundColor: "surface.disabled",
-      color: "text.disabled",
-      outline: "none",
-
-      _hover: {
-        backgroundColor: "core.surface.disabled",
-        boxShadow: "none",
-        color: "core.text.disabled",
-      },
-      _checked: {
-        cursor: "not-allowed",
-        boxShadow: "none",
-        color: "core.text.disabled",
-        backgroundColor: "core.surface.disabled",
-        _hover: {
-          backgroundColor: "core.surface.disabled",
-          boxShadow: "none",
-          color: "core.text.disabled",
-        },
-      },
-    },
-  },
-  variants: {
-    variant: {
-      core: {
-        color: "core.text",
-        outlineColor: "core.outline",
-
-        _hover: {
-          outline: "2px solid",
-          outlineColor: "core.outline.hover",
-
-          _active: {
-            outline: "1px solid",
-            outlineColor: "core.outline",
-            backgroundColor: "core.surface.active",
-          },
-        },
-      },
-      accent: {
-        backgroundColor: "accent.surface",
-        color: "accent.text",
-        outline: "none",
-
-        _hover: {
-          backgroundColor: "accent.surface.hover",
-
-          _active: {
-            backgroundColor: "accent.surface.active",
-          },
-        },
-      },
-      floating: {
-        backgroundColor: "floating.surface",
-        outline: "1px solid",
-        outlineColor: "floating.outline",
-        color: "floating.text",
-
-        boxShadow: "sm",
-        _hover: {
-          backgroundColor: "floating.surface.hover",
-          outline: "1px solid",
-          outlineColor: "floating.outline.hover",
-
-          _active: {
-            backgroundColor: "floating.surface.active",
-            outline: "1px solid",
-            outlineColor: "floating.outline",
-          },
-        },
-      },
-    },
-    size: {
-      xs: {
-        _checked: {
-          borderRadius: "0.563rem",
-        },
-        height: 5,
-        paddingX: 1.5,
-      },
-      sm: {
-        _checked: {
-          borderRadius: "sm",
-        },
-        height: 6,
-        paddingX: 2,
-      },
-      md: {
-        _checked: {
-          borderRadius: "sm",
-        },
-        height: 7,
-        paddingX: 2,
-      },
-      lg: {
-        _checked: {
-          borderRadius: "md",
-        },
-        height: 8,
-        paddingX: 3,
-      },
-    },
-  },
-});