@vygruppen/spor-react 5.1.1 → 5.3.0

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, defineStyleConfig, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-J6I7IHRU.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-55HLEY3T.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "5.1.1",
+  "version": "5.3.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -26,6 +26,7 @@
     "@vygruppen/spor-icon-react": "*",
     "@vygruppen/spor-loader": "*",
     "awesome-phonenumber": "^5.10.0",
+    "deepmerge": "^4.3.1",
     "framer-motion": "^9.1.7",
     "lottie-react": "^2.3.1",
     "react-aria": "^3.30.0",

package/src/datepicker/DatePicker.tsx

@@ -25,12 +25,13 @@ import { DateField } from "./DateField";
 import { StyledField } from "./StyledField";
 import { useCurrentLocale } from "./utils";
 
-type DatePickerProps = AriaDatePickerProps<DateValue> &
+type DatePickerProps = Omit<AriaDatePickerProps<DateValue>, "onChange"> &
   Pick<BoxProps, "minHeight" | "width"> & {
     variant: ResponsiveValue<"base" | "floating" | "ghost">;
     name?: string;
     showYearNavigation?: boolean;
     withPortal?: boolean;
+    onChange?: (value: DateValue | null) => void;
   };
 
 /**

package/src/datepicker/DateRangePicker.tsx

@@ -29,7 +29,10 @@ import { RangeCalendar } from "./RangeCalendar";
 import { StyledField } from "./StyledField";
 import { useCurrentLocale } from "./utils";
 
-type DateRangePickerProps = AriaDateRangePickerProps<DateValue> &
+type DateRangePickerProps = Omit<
+  AriaDateRangePickerProps<DateValue>,
+  "onChange"
+> &
   Pick<BoxProps, "minHeight"> & {
     startLabel?: string;
     startName?: string;
@@ -37,6 +40,12 @@ type DateRangePickerProps = AriaDateRangePickerProps<DateValue> &
     endName?: string;
     variant: ResponsiveValue<"base" | "floating" | "ghost">;
     withPortal?: boolean;
+    onChange?: (
+      dates: {
+        start: DateValue | null;
+        end: DateValue | null;
+      } | null,
+    ) => void;
   };
 /**
  * A date range picker component.

package/src/datepicker/TimePicker.tsx

@@ -31,7 +31,7 @@ type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & {
    **/
   defaultValue?: TimeValue | null;
   /** Callback for when the time changes */
-  onChange?: (value: TimeValue) => void;
+  onChange?: (value: TimeValue | null) => void;
   /** The maxiumum number of minutes to move when the step buttons are used.
    *
    * Defaults to 30 minutes.

package/src/index.tsx

@@ -17,6 +17,7 @@ export * from "./logo";
 export * from "./media-controller";
 export * from "./modal";
 export * from "./popover";
+export * from "./progress-indicator";
 export * from "./provider";
 export * from "./stepper";
 export * from "./tab";

package/src/input/InfoSelect.tsx

@@ -113,6 +113,7 @@ type InfoSelectProps<T extends object> = {
   disabledKeys?: string[];
   /** Whether or not the input is invalid */
   "aria-invalid"?: boolean;
+  variant?: "base" | "floating";
 };
 /**
  * A styled select component.
@@ -157,6 +158,7 @@ export function InfoSelect<T extends object>({
   value,
   isLabelSrOnly,
   defaultValue,
+  variant = "base",
   ...props
 }: InfoSelectProps<T>) {
   const renamedProps = {
@@ -174,9 +176,13 @@ export function InfoSelect<T extends object>({
     triggerRef,
   );
 
+  const stateStyle = "completed";
+
   const styles = useMultiStyleConfig("InfoSelect", {
     isOpen: state.isOpen,
     isLabelSrOnly,
+    variant,
+    stateStyle,
   });
   const { buttonProps } = useButton(triggerProps, triggerRef);
   const { t } = useTranslation();

package/src/input/NumericStepper.tsx

@@ -91,7 +91,7 @@ export function NumericStepper({
   return (
     <Flex alignItems="center" {...boxProps}>
       <VerySmallButton
-        icon={<SubtractIcon color="white" stepLabel={clampedStepSize} />}
+        icon={<SubtractIcon stepLabel={clampedStepSize} />}
         aria-label={t(texts.decrementButtonAriaLabel(clampedStepSize))}
         onClick={() => onChange(Math.max(value - clampedStepSize, minValue))}
         visibility={value <= minValue ? "hidden" : "visible"}
@@ -164,7 +164,7 @@ export function NumericStepper({
         </chakra.text>
       )}
       <VerySmallButton
-        icon={<AddIcon color="white" stepLabel={clampedStepSize} />}
+        icon={<AddIcon stepLabel={clampedStepSize} />}
         aria-label={t(texts.incrementButtonAriaLabel(clampedStepSize))}
         onClick={() => onChange(Math.min(value + clampedStepSize, maxValue))}
         visibility={value >= maxValue ? "hidden" : "visible"}

package/src/progress-indicator/ProgressDot.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Box } from "..";
+import { useMultiStyleConfig } from "@chakra-ui/react";
+
+type ProgressDot = {
+  isActive: boolean;
+};
+
+export const ProgressDot = ({ isActive }: ProgressDot) => {
+  const style = useMultiStyleConfig("ProgressIndicator");
+  return (
+    <Box
+      as="svg"
+      display="block"
+      __css={style.progressDot}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 100 100"
+      aria-current={isActive ? "step" : undefined}
+    >
+      <Box as="circle" cx="50" cy="50" r="50" />
+    </Box>
+  );
+};

package/src/progress-indicator/ProgressIndicator.tsx

@@ -0,0 +1,56 @@
+import { useMultiStyleConfig } from "@chakra-ui/react";
+import React from "react";
+import { Box, createTexts, useTranslation } from "..";
+import { ProgressDot } from "./ProgressDot";
+
+type ProgressIndicatorProps = {
+  numberOfSteps: number;
+  activeStep: number;
+};
+
+/**
+ * A progress indicator is used to show which step of a process a user is currently in
+ * to give them a sense of progress.
+ *
+ * You specify the active step, which starts at 1 (not 0)
+ *
+ * ```tsx
+ * <ProgressIndicator
+ *  numberOfSteps={3}
+ *  activeStep={2}
+ * />
+ * ```
+ */
+export const ProgressIndicator = ({
+  numberOfSteps,
+  activeStep,
+}: ProgressIndicatorProps) => {
+  const { t } = useTranslation();
+  const style = useMultiStyleConfig("ProgressIndicator");
+
+  return (
+    <Box
+      __css={style.root}
+      role="progressbar"
+      aria-valuemin={1}
+      aria-valuemax={numberOfSteps}
+      aria-valuenow={activeStep}
+      aria-valuetext={t(texts.stepsOf(activeStep, numberOfSteps))}
+    >
+      <Box __css={style.container}>
+        {Array.from({ length: numberOfSteps }, (_, i) => (
+          <ProgressDot aria-value={i + 1} isActive={activeStep === i + 1} />
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+const texts = createTexts({
+  stepsOf: (activeStep, numberOfSteps) => ({
+    nb: `Steg ${activeStep} av ${numberOfSteps}`,
+    nn: `Steg ${activeStep} av ${numberOfSteps}`,
+    sv: `Steg ${activeStep} av ${numberOfSteps}`,
+    en: `Step ${activeStep} of ${numberOfSteps}`,
+  }),
+});

package/src/progress-indicator/index.tsx

@@ -0,0 +1 @@
+export * from "./ProgressIndicator";

package/src/provider/SporProvider.tsx

@@ -1,11 +1,13 @@
 import { ChakraProvider, ChakraProviderProps } from "@chakra-ui/react";
 import { Global } from "@emotion/react";
+import deepmerge from "deepmerge";
 import React from "react";
 import { Language, LanguageProvider } from "..";
-import { theme as defaultSporTheme, fontFaces } from "../";
+import { Brand, brandTheme, theme as defaultSporTheme, fontFaces } from "../";
 
 type SporProviderProps = ChakraProviderProps & {
   language?: Language;
+  brand?: Brand;
 };
 
 /**
@@ -47,12 +49,17 @@ type SporProviderProps = ChakraProviderProps & {
 export const SporProvider = ({
   theme = defaultSporTheme,
   language = Language.NorwegianBokmal,
+  brand = Brand.VyDigital,
   children,
   ...props
 }: SporProviderProps) => {
+  const brandCustomizations = brandTheme[brand] ?? {};
+
+  const extendedTheme = deepmerge(theme, brandCustomizations);
+
   return (
     <LanguageProvider language={language}>
-      <ChakraProvider theme={theme} {...props}>
+      <ChakraProvider theme={extendedTheme} {...props}>
         <Global styles={fontFaces} />
         {children}
       </ChakraProvider>

package/src/stepper/StepperStep.tsx

@@ -35,8 +35,8 @@ export const StepperStep = ({
           state === "active"
             ? "primary"
             : state === "completed"
-            ? "tertiary"
-            : "ghost"
+              ? "tertiary"
+              : "ghost"
         }
         {...adjustedProps}
         onClick={() => onClick(stepNumber)}

package/src/theme/components/index.ts

@@ -25,6 +25,7 @@ export { default as ListBox } from "./listbox";
 export { default as MediaControllerButton } from "./media-controller-button";
 export { default as Modal } from "./modal";
 export { default as Popover } from "./popover";
+export { default as ProgressIndicator } from "./progress-indicator";
 export { default as Radio } from "./radio";
 export { default as Select } from "./select";
 export { default as Skeleton } from "./skeleton";

package/src/theme/components/info-select.ts

@@ -2,8 +2,9 @@ import { anatomy } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { focusVisible } from "../utils/focus-utils";
 import { srOnly } from "../utils/sr-utils";
-import { baseBorder } from "../utils/border-utils";
-import { baseBackground } from "../utils/background-utils";
+import { baseBorder, floatingBorder } from "../utils/border-utils";
+import { baseBackground, floatingBackground } from "../utils/background-utils";
+import { PartsStyleInterpolation } from "@chakra-ui/styled-system";
 
 const parts = anatomy("InfoSelect").parts(
   "container",
@@ -55,7 +56,6 @@ const config = helpers.defineMultiStyleConfig({
         ...baseBorder("focus", props),
       },
       _expanded: {
-        ...baseBackground("active", props),
         ...baseBorder("focus", props),
       },
       _invalid: {
@@ -75,5 +75,34 @@ const config = helpers.defineMultiStyleConfig({
     },
     arrowIcon: {},
   }),
+  variants: {
+    base: (props) => ({}),
+    floating: (props) => ({
+      button: {
+        ...floatingBackground("default", props),
+        ...floatingBorder("default", props),
+        _hover: {
+          ...floatingBorder("hover", props),
+          ...floatingBackground("hover", props),
+        },
+        ...focusVisible({
+          focus: {
+            ...floatingBorder("focus", props),
+            outline: "none",
+          },
+          notFocus: {
+            ...floatingBorder("default", props),
+          },
+        }),
+        _active: {
+          ...floatingBorder("active", props),
+          ...floatingBackground("active", props),
+        },
+      },
+    }),
+  },
+  defaultProps: {
+    variant: "base",
+  },
 });
 export default config;

package/src/theme/components/listbox.ts

@@ -2,7 +2,8 @@ import { anatomy } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
 import { colors } from "../foundations";
-import { baseBackground } from "../utils/background-utils";
+import { baseBackground, ghostBackground } from "../utils/background-utils";
+import { baseBorder } from "../utils/border-utils";
 
 const parts = anatomy("ListBox").parts(
   "container",
@@ -19,7 +20,7 @@ const config = helpers.defineMultiStyleConfig({
       // avoiding extra div by blending a transparent color into darkGrey for dark mode
       backgroundColor: mode(
         "white",
-        `color-mix(in srgb, ${colors.darkGrey}, ${colors.white} 10%)`,
+        `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 10%)`,
       )(props),
       boxShadow: "sm",
       overflowY: "auto",
@@ -36,21 +37,18 @@ const config = helpers.defineMultiStyleConfig({
       borderRadius: "sm",
       color: mode("darkGrey", "white")(props),
       cursor: "pointer",
-      _hover: {
-        backgroundColor: mode("seaMist", "pine")(props),
-        outline: "none",
-      },
+      outline: "none",
       _active: {
-        backgroundColor: mode("mint", "pine")(props),
-        outline: "none",
+        ...ghostBackground("active", props),
       },
       _focus: {
-        outline: "none",
-        backgroundColor: mode("seaMist", "pine")(props),
+        ...ghostBackground("focus", props),
+      },
+      _hover: {
+        ...ghostBackground("hover", props),
       },
       _selected: {
-        ...baseBackground("selected", props),
-        color: "white",
+        ...ghostBackground("selected", props),
       },
     },
     label: {},

package/src/theme/components/progress-indicator.ts

@@ -0,0 +1,45 @@
+import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
+import { anatomy, mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
+
+const parts = anatomy("progress-indicator").parts(
+  "root",
+  "container",
+  "progressDot",
+);
+
+const helpers = createMultiStyleConfigHelpers(parts.keys);
+
+const config = helpers.defineMultiStyleConfig({
+  baseStyle: (props) => ({
+    root: {
+      width: "100%",
+    },
+    container: {
+      display: "flex",
+      alignItems: "center",
+      gap: 1,
+      justifyContent: ["space-between", "center"],
+    },
+    progressDot: {
+      height: 1,
+      width: 1,
+      "&[aria-current='step']": {
+        circle: {
+          fill: mode("pine", "coralGreen")(props),
+        },
+      },
+      circle: {
+        fill: mode("blackAlpha.400", "whiteAlpha.400")(props),
+      },
+    },
+  }),
+
+  variants: {
+    base: (props) => ({}),
+  },
+  defaultProps: {
+    variant: "base",
+  },
+});
+
+export default config;

package/src/theme/index.ts

@@ -2,6 +2,11 @@ import { theme as defaultTheme } from "@chakra-ui/theme";
 import * as components from "./components";
 import * as foundations from "./foundations";
 
+export enum Brand {
+  VyDigital = "VyDigital",
+  VyUtvikling = "VyUtvikling",
+}
+
 export const theme = {
   ...defaultTheme,
   ...foundations,
@@ -11,4 +16,17 @@ export const theme = {
   },
 };
 
+export const brandTheme = {
+  [Brand.VyDigital]: {
+    colors: {
+      accent: foundations.colors.night,
+    },
+  },
+  [Brand.VyUtvikling]: {
+    colors: {
+      accent: foundations.colors.darkGrey,
+    },
+  },
+};
+
 export { fontFaces } from "./font-faces";

package/src/theme/utils/background-utils.ts

@@ -1,14 +1,15 @@
 import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
+import { State, Subset } from "./types";
+import { colors } from "../foundations";
 
-type State =
-  | "default"
-  | "hover"
-  | "active"
-  | "focus"
-  | "selected"
-  | "invalid"
-  | "disabled";
-export function baseBackground(state: State, props: StyleFunctionProps) {
+type BaseBackgroundState = Subset<
+  State,
+  "default" | "active" | "selected" | "disabled"
+>;
+export function baseBackground(
+  state: BaseBackgroundState,
+  props: StyleFunctionProps,
+) {
   switch (state) {
     case "active":
       return {
@@ -23,6 +24,98 @@ export function baseBackground(state: State, props: StyleFunctionProps) {
         backgroundColor: mode("silver", "whiteAlpha.100")(props),
       };
     default:
-      return {};
+      return {
+        backgroundColor: "transparent",
+      };
+  }
+}
+
+type GhostBackgroundState = Subset<
+  State,
+  "default" | "hover" | "focus" | "active" | "selected"
+>;
+
+export function ghostBackground(
+  state: GhostBackgroundState,
+  props: StyleFunctionProps,
+) {
+  switch (state) {
+    case "hover": {
+      return {
+        backgroundColor: mode("seaMist", "whiteAlpha.100")(props),
+      };
+    }
+    case "active":
+      return {
+        backgroundColor: mode("seaMist", "whiteAlpha.200")(props),
+      };
+    case "focus":
+      return {
+        backgroundColor: "transparent",
+      };
+    case "selected": {
+      return {
+        backgroundColor: mode("mint", "whiteAlpha.200")(props),
+      };
+    }
+    case "default":
+    default:
+      return {
+        backgroundColor: "transparent",
+      };
+  }
+}
+
+type FloatingBackgroundState = Subset<
+  State,
+  "default" | "hover" | "focus" | "active" | "selected"
+>;
+
+export function floatingBackground(
+  state: FloatingBackgroundState,
+  props: StyleFunctionProps,
+) {
+  switch (state) {
+    case "selected":
+      return {
+        backgroundColor: mode("mint", "pine")(props),
+      };
+    case "active":
+      return {
+        backgroundColor: mode(
+          "mint",
+          `color-mix(in srgb, ${
+            props.theme.darkBackgroundColor ?? colors.darkGrey
+          }, ${colors.white} 30%)`,
+        )(props),
+      };
+    case "hover":
+      return {
+        backgroundColor: mode(
+          "white",
+          `color-mix(in srgb, ${
+            props.theme.darkBackgroundColor ?? colors.darkGrey
+          }, ${colors.white} 20%)`,
+        )(props),
+      };
+    case "focus":
+      return {
+        backgroundColor: mode(
+          "white",
+          `color-mix(in srgb, ${
+            props.theme.darkBackgroundColor ?? colors.darkGrey
+          }, ${colors.white} 40%)`,
+        )(props),
+      };
+    case "default":
+    default:
+      return {
+        backgroundColor: mode(
+          "white",
+          `color-mix(in srgb, ${
+            props.theme.darkBackgroundColor ?? colors.darkGrey
+          }, ${colors.white} 10%)`,
+        )(props),
+      };
   }
 }

package/src/theme/utils/border-utils.ts

@@ -1,16 +1,13 @@
 import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
 import { getBoxShadowString } from "./box-shadow-utils";
+import { State, Subset } from "./types";
 
-type State =
-  | "default"
-  | "hover"
-  | "active"
-  | "focus"
-  | "selected"
-  | "invalid"
-  | "disabled";
+type BorderState = Subset<
+  State,
+  "hover" | "focus" | "disabled" | "selected" | "invalid" | "default"
+>;
 
-export function baseBorder(state: State, props: StyleFunctionProps) {
+export function baseBorder(state: BorderState, props: StyleFunctionProps) {
   switch (state) {
     case "hover":
       return {
@@ -57,3 +54,37 @@ export function baseBorder(state: State, props: StyleFunctionProps) {
       };
   }
 }
+
+type FloatingBorderState = Subset<
+  State,
+  "default" | "hover" | "focus" | "active" | "selected"
+>;
+export function floatingBorder(
+  state: FloatingBorderState,
+  props: StyleFunctionProps,
+) {
+  switch (state) {
+    case "hover":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("grey.300", "white")(props),
+        }),
+      };
+    case "selected":
+    case "focus":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props),
+          borderWidth: 2,
+        }),
+      };
+    case "active":
+    case "default":
+    default:
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("grey.200", "whiteAlpha.400")(props),
+        }),
+      };
+  }
+}

package/src/theme/utils/types.ts

@@ -0,0 +1,11 @@
+export type State =
+  | "default"
+  | "hover"
+  | "active"
+  | "focus"
+  | "selected"
+  | "invalid"
+  | "disabled";
+
+// Helper type to extract subset of union types
+export type Subset<T, U extends T> = T extends U ? T : never;