@vygruppen/spor-react 5.2.0 → 5.4.0

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;