@vygruppen/spor-react 12.0.2 → 12.0.4

package/src/index.tsx

@@ -1,12 +1,10 @@
-export * as tokens from "@vygruppen/spor-design-tokens";
 export * from "./accordion";
 export * from "./alert";
 export * from "./breadcrumb";
 export * from "./button";
 export * from "./color-mode";
 export * from "./datepicker";
-export * from "./theme/brand";
-export * from "./theme";
+export * from "./dialog";
 export * from "./i18n";
 export * from "./image";
 export * from "./input";
@@ -17,16 +15,18 @@ export * from "./list";
 export * from "./loader";
 export * from "./logo";
 export * from "./media-controller";
-export * from "./dialog";
 export * from "./nudge";
 export * from "./pagination";
+export * from "./popover";
 export * from "./progress-indicator";
 export * from "./provider";
 export * from "./stepper";
 export * from "./tab";
 export * from "./table";
+export * from "./theme";
+export * from "./theme/brand";
 export * from "./toast";
 export * from "./transition";
 export * from "./typography";
 export * from "./util";
-export * from "./popover";
+export * as tokens from "@vygruppen/spor-design-tokens";

package/src/input/AttachedInputs.tsx

@@ -1,8 +1,10 @@
 "use client";
 
-import React, { forwardRef, PropsWithChildren } from "react";
 import { chakra, Group, RecipeVariantProps, useRecipe } from "@chakra-ui/react";
+import React, { forwardRef, PropsWithChildren } from "react";
+
 import { attachedInputsRecipe } from "@/theme/recipes/attached-inputs";
+
 import { InputGroupProps } from "./InputGroup";
 
 /**

package/src/input/CardSelect.tsx

@@ -1,15 +1,16 @@
 "use client";
 import {
+  Popover as ChakraPopover,
   PopoverRootProps,
-  usePopoverContext,
   Portal,
-  Popover as ChakraPopover,
+  usePopoverContext,
 } from "@chakra-ui/react";
 import {
   DropdownDownFill18Icon,
   DropdownDownFill24Icon,
 } from "@vygruppen/spor-icon-react";
 import React, { forwardRef, ReactNode } from "react";
+
 import { Button, ButtonProps, StaticCard, StaticCardProps } from "..";
 
 export const CardSelect = ({ size = "md", ...props }: PopoverRootProps) => {

package/src/input/Checkbox.tsx

@@ -1,4 +1,3 @@
-import { checkboxSlotRecipe } from "@/theme/slot-recipes/checkbox";
 import {
   Checkbox as ChakraCheckbox,
   RecipeVariantProps,
@@ -6,6 +5,8 @@ import {
 import * as React from "react";
 import { PropsWithChildren } from "react";
 
+import { checkboxSlotRecipe } from "@/theme/slot-recipes/checkbox";
+
 type CheckboxVariantProps = RecipeVariantProps<typeof checkboxSlotRecipe>;
 
 type CheckboxProps = ChakraCheckbox.RootProps &

package/src/input/ChoiceChip.tsx

@@ -1,5 +1,4 @@
 "use client";
-import { choiceChipRecipe } from "@/theme/recipes/choice-chip";
 import {
   chakra,
   RecipeVariantProps,
@@ -9,6 +8,8 @@ import {
 import { CloseOutline24Icon } from "@vygruppen/spor-icon-react";
 import React, { ChangeEvent, PropsWithChildren, useId } from "react";
 
+import { choiceChipRecipe } from "@/theme/recipes/choice-chip";
+
 type ChoiceChipVariantProps = RecipeVariantProps<typeof choiceChipRecipe>;
 
 export type ChoiceChipProps = PropsWithChildren<ChoiceChipVariantProps> & {

package/src/input/Combobox.tsx

@@ -9,6 +9,7 @@ import React, {
 } from "react";
 import { AriaComboBoxProps, useComboBox, useFilter } from "react-aria";
 import { useComboBoxState } from "react-stately";
+
 import { ColorSpinner, Input, InputProps, ListBox } from "..";
 import { Popover } from "./Popover";
 

package/src/input/CountryCodeSelect.tsx

@@ -3,11 +3,12 @@
 import { createListCollection } from "@chakra-ui/react";
 import { getSupportedCallingCodes } from "awesome-phonenumber";
 import React, { forwardRef } from "react";
+
 import {
+  createTexts,
   Select,
   SelectItem,
   SelectProps,
-  createTexts,
   useTranslation,
 } from "..";
 

package/src/input/Field.tsx

@@ -6,6 +6,7 @@ import {
   useSlotRecipe,
 } from "@chakra-ui/react";
 import * as React from "react";
+
 import { fieldSlotRecipe } from "../theme/slot-recipes/field";
 
 type FieldVariantProps = RecipeVariantProps<typeof fieldSlotRecipe>;

package/src/input/Input.tsx

@@ -1,14 +1,16 @@
 "use client";
 
-import { inputRecipe } from "@/theme/recipes/input";
 import {
   chakra,
+  Input as ChakraInput,
   InputProps as ChakraInputProps,
-  useRecipe,
   type RecipeVariantProps,
-  Input as ChakraInput,
+  useRecipe,
 } from "@chakra-ui/react";
 import React, { forwardRef, PropsWithChildren } from "react";
+
+import { inputRecipe } from "@/theme/recipes/input";
+
 import { Field, FieldProps } from "./Field";
 import { InputGroup } from "./InputGroup";
 

package/src/input/InputGroup.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import type { InputElementProps, GroupProps } from "@chakra-ui/react";
+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 & {

package/src/input/ListBox.tsx

@@ -1,11 +1,11 @@
 "use client";
 import {
   Box,
+  type BoxProps,
   ListItem,
   ListRootProps,
   RecipeVariantProps,
   useSlotRecipe,
-  type BoxProps,
 } from "@chakra-ui/react";
 import type { Node } from "@react-types/shared";
 import React, {
@@ -22,6 +22,7 @@ import {
   useOption,
 } from "react-aria";
 import { type ListState, type SelectState } from "react-stately";
+
 import { List } from "..";
 import { useColorModeValue } from "../color-mode";
 import { listBoxSlotRecipe } from "../theme/slot-recipes/listbox";
@@ -117,7 +118,7 @@ export const ListBox = forwardRef<HTMLDivElement, ListBoxProps<object>>(
  * Useful if you want to render a custom Item - especially if it has a description.
  */
 export function ItemLabel({ children }: { children: React.ReactNode }) {
-  let { labelProps } = useOptionContext();
+  const { labelProps } = useOptionContext();
   return <Box {...labelProps}>{children}</Box>;
 }
 
@@ -127,7 +128,7 @@ export function ItemLabel({ children }: { children: React.ReactNode }) {
  * Useful if you want to render a custom Item with more than just a label.
  */
 export function ItemDescription({ children }: { children: React.ReactNode }) {
-  let { descriptionProps } = useOptionContext();
+  const { descriptionProps } = useOptionContext();
   const recipe = useSlotRecipe({ key: "listbox" });
   const styles = recipe({});
   return (
@@ -156,7 +157,7 @@ function Option({ item, state }: OptionProps) {
   const recipe = useSlotRecipe({ key: "listBox" });
   const styles = recipe({});
 
-  let dataFields: Record<string, boolean> = {};
+  const dataFields: Record<string, boolean> = {};
   if (isSelected) {
     dataFields["data-selected"] = true;
   }

package/src/input/NativeSelect.tsx

@@ -1,12 +1,13 @@
 "use client";
 import {
-  RecipeVariantProps,
   NativeSelect as ChakraNativeSelect,
+  RecipeVariantProps,
   useSlotRecipe,
   NativeSelectFieldProps as ChakraNativeSelectFieldProps,
 } from "@chakra-ui/react";
 import { DropdownDownFill18Icon } from "@vygruppen/spor-icon-react";
 import * as React from "react";
+
 import { nativeSelectSlotRecipe } from "../theme/slot-recipes/native-select";
 import { Field } from "./Field";
 

package/src/input/NumericStepper.tsx

@@ -6,6 +6,7 @@ import {
   useSlotRecipe,
 } from "@chakra-ui/react";
 import React, { PropsWithChildren, useRef } from "react";
+
 import { BoxProps, createTexts, IconButton, useTranslation } from "..";
 import { numericStepperRecipe } from "../theme/slot-recipes/numeric-stepper";
 import { Field } from "./Field";

package/src/input/PasswordInput.tsx

@@ -2,6 +2,7 @@
 
 import { Button, useControllableState } from "@chakra-ui/react";
 import React, { forwardRef } from "react";
+
 import { ButtonProps, Input, InputProps } from "..";
 import { createTexts, useTranslation } from "..";
 import { InputGroupProps } from "./InputGroup";

package/src/input/PhoneNumberInput.tsx

@@ -1,7 +1,8 @@
 "use client";
 import { useControllableState } from "@chakra-ui/react";
 import React, { forwardRef } from "react";
-import { Input, InputProps, createTexts, useTranslation } from "..";
+
+import { createTexts, Input, InputProps, useTranslation } from "..";
 import { AttachedInputs } from "./AttachedInputs";
 import { CountryCodeSelect } from "./CountryCodeSelect";
 

package/src/input/Radio.tsx

@@ -1,8 +1,9 @@
 "use client";
-import React, { forwardRef, PropsWithChildren } from "react";
 import { RecipeVariantProps } from "@chakra-ui/react";
-import { radioGroupSlotRecipe } from "../theme/slot-recipes/radio";
 import { RadioGroup as ChakraRadioGroup } from "@chakra-ui/react";
+import React, { forwardRef, PropsWithChildren } from "react";
+
+import { radioGroupSlotRecipe } from "../theme/slot-recipes/radio";
 
 type RadioVariants = RecipeVariantProps<typeof radioGroupSlotRecipe>;
 

package/src/input/SearchInput.tsx

@@ -5,6 +5,7 @@ import {
   SearchOutline24Icon,
 } from "@vygruppen/spor-icon-react";
 import React, { forwardRef } from "react";
+
 import { createTexts, Input, InputProps, useTranslation } from "..";
 import { IconButton } from "../button/IconButton";
 

package/src/input/Select.tsx

@@ -1,16 +1,14 @@
 "use client";
 
-import { CloseButton } from "@/button";
-import { selectSlotRecipe } from "@/theme/slot-recipes/select";
 import type {
-  SelectRootProps as ChakraSelectRootProps,
   CollectionItem,
   RecipeVariantProps,
+  SelectRootProps as ChakraSelectRootProps,
 } from "@chakra-ui/react";
 import {
   Box,
-  Select as ChakraSelect,
   Portal,
+  Select as ChakraSelect,
   useSlotRecipe,
 } from "@chakra-ui/react";
 import {
@@ -20,6 +18,9 @@ import {
 import * as React from "react";
 import { PropsWithChildren } from "react";
 
+import { CloseButton } from "@/button";
+import { selectSlotRecipe } from "@/theme/slot-recipes/select";
+
 type SelectVariantProps = RecipeVariantProps<typeof selectSlotRecipe>;
 
 export type SelectProps = ChakraSelectRootProps &

package/src/input/Switch.tsx

@@ -1,11 +1,12 @@
 "use client";
 import {
+  ConditionalValue,
   RecipeVariantProps,
   Switch as ChakraSwitch,
-  ConditionalValue,
   useSlotRecipe,
 } from "@chakra-ui/react";
 import React, { forwardRef, PropsWithChildren } from "react";
+
 import { switchSlotRecipe } from "../theme/slot-recipes/switch";
 import { Field } from "./Field";
 

package/src/input/Textarea.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import {
+  FieldLabel,
   RecipeVariantProps,
-  useRecipe,
   Textarea as ChakraTextarea,
   TextareaProps as ChakraTextareaProps,
-  FieldLabel,
+  useRecipe,
 } from "@chakra-ui/react";
 import React, {
   forwardRef,
@@ -15,6 +15,7 @@ import React, {
   useRef,
   useState,
 } from "react";
+
 import { textareaRecipe } from "../theme/recipes/textarea";
 import { Field, FieldProps } from "./Field";
 

package/src/input/index.ts

@@ -13,6 +13,6 @@ export * from "./PasswordInput";
 export * from "./PhoneNumberInput";
 export * from "./Radio";
 export * from "./SearchInput";
+export * from "./Select";
 export * from "./Switch";
 export * from "./Textarea";
-export * from "./Select";

package/src/layout/PressableCard.tsx

@@ -1,6 +1,7 @@
 "use client";
-import React, { forwardRef } from "react";
 import { ButtonProps, chakra, RecipeVariantProps } from "@chakra-ui/react";
+import React, { forwardRef } from "react";
+
 import { pressableCardRecipe } from "../theme/recipes/pressable-card";
 
 /**

package/src/layout/RadioCard.tsx

@@ -5,6 +5,7 @@ import {
   useSlotRecipe,
 } from "@chakra-ui/react";
 import React, { forwardRef, useId } from "react";
+
 import { radioCardSlotRecipe } from "../theme/slot-recipes/radio-card";
 
 /**

package/src/layout/Separator.tsx

@@ -2,11 +2,12 @@
 
 import {
   RecipeVariantProps,
-  useRecipe,
   Separator as ChakraSeparator,
   SeparatorProps as ChakraSeparatorProps,
+  useRecipe,
 } from "@chakra-ui/react";
 import React, { forwardRef, PropsWithChildren } from "react";
+
 import { separatorRecipe } from "../theme/recipes/separator";
 
 type SeparatorVariantProps = RecipeVariantProps<typeof separatorRecipe>;

package/src/layout/StaticCard.tsx

@@ -1,6 +1,7 @@
 "use client";
-import React, { forwardRef } from "react";
 import { Box, BoxProps, chakra, RecipeVariantProps } from "@chakra-ui/react";
+import React, { forwardRef } from "react";
+
 import { staticCardRecipe } from "../theme/recipes/static-card";
 
 /**

package/src/layout/index.tsx

@@ -1,3 +1,17 @@
+export * from "./PressableCard";
+export * from "./RadioCard";
+export * from "./Separator";
+export * from "./StaticCard";
+export type {
+  BoxProps,
+  CenterProps,
+  ContainerProps,
+  FlexProps,
+  GridItemProps,
+  GridProps,
+  SimpleGridProps,
+  SpacerProps,
+} from "@chakra-ui/react";
 export {
   Box,
   Center,
@@ -5,24 +19,10 @@ export {
   Flex,
   Grid,
   GridItem,
-  Stack,
   HStack,
   SimpleGrid,
   Spacer,
-  VStack,
   Span,
+  Stack,
+  VStack,
 } from "@chakra-ui/react";
-export type {
-  BoxProps,
-  CenterProps,
-  ContainerProps,
-  FlexProps,
-  GridItemProps,
-  GridProps,
-  SimpleGridProps,
-  SpacerProps,
-} from "@chakra-ui/react";
-export * from "./Separator";
-export * from "./RadioCard";
-export * from "./StaticCard";
-export * from "./PressableCard";

package/src/linjetag/InfoTag.tsx

@@ -1,9 +1,10 @@
 "use client";
 import { Box, RecipeVariantProps, useSlotRecipe } from "@chakra-ui/react";
 import React, { PropsWithChildren } from "react";
+
+import { infoTagSlotRecipe } from "../theme/slot-recipes/info-tag";
 import { LineIcon } from "./LineIcon";
 import type { TagProps } from "./types";
-import { infoTagSlotRecipe } from "../theme/slot-recipes/info-tag";
 
 type InfoTagVariantProps = RecipeVariantProps<typeof infoTagSlotRecipe>;
 

package/src/linjetag/LineIcon.tsx

@@ -6,6 +6,7 @@ import {
   useSlotRecipe,
 } from "@chakra-ui/react";
 import React, { forwardRef, PropsWithChildren } from "react";
+
 import { lineIconSlotRecipe } from "../theme/slot-recipes/line-icon";
 import { getCorrectIcon } from "./icons";
 import { CustomVariantProps, TagProps } from "./types";

package/src/linjetag/TravelTag.tsx

@@ -14,9 +14,10 @@ import {
   WarningFill24Icon,
 } from "@vygruppen/spor-icon-react";
 import React, { forwardRef, PropsWithChildren } from "react";
+
+import { travelTagSlotRecipe } from "../theme/slot-recipes/travel-tag";
 import { LineIcon } from "./LineIcon";
 import type { TagProps } from "./types";
-import { travelTagSlotRecipe } from "../theme/slot-recipes/travel-tag";
 
 type TravelTagVariantProps = RecipeVariantProps<typeof travelTagSlotRecipe>;
 

package/src/linjetag/icons.tsx

@@ -26,6 +26,7 @@ import {
   WalkFill30Icon,
 } from "@vygruppen/spor-icon-react";
 import React from "react";
+
 import type { Size, Variant } from "./types";
 
 const icons: Record<Variant, Record<Size, React.ComponentType>> = {

package/src/link/TextLink.tsx

@@ -6,6 +6,7 @@ import {
 } from "@chakra-ui/react";
 import { LinkOutOutline24Icon } from "@vygruppen/spor-icon-react";
 import React, { forwardRef, PropsWithChildren } from "react";
+
 import { createTexts, useTranslation } from "..";
 import { linkRecipe } from "../theme/recipes/link";
 

package/src/loader/ClientOnly.tsx

@@ -1,5 +1,6 @@
 "use client";
 import React, { PropsWithChildren } from "react";
+
 import { useHydrated } from "./useHydrated";
 
 type ClientOnlyProps = PropsWithChildren<{

package/src/loader/ColorInlineLoader.tsx

@@ -1,6 +1,7 @@
 import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
 import { inlineLoaderColorData } from "@vygruppen/spor-loader";
 import React from "react";
+
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";
 

package/src/loader/ColorSpinner.tsx

@@ -2,6 +2,7 @@
 import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
 import { spinnerColorData } from "@vygruppen/spor-loader";
 import React from "react";
+
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";
 

package/src/loader/ContentLoader.tsx

@@ -2,6 +2,7 @@
 import { Box, BoxProps, VisuallyHidden } from "@chakra-ui/react";
 import { contentLoaderData } from "@vygruppen/spor-loader";
 import React from "react";
+
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";
 

package/src/loader/DarkFullScreenLoader.tsx

@@ -2,6 +2,7 @@
 import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
 import { fullScreenLoaderWhiteData } from "@vygruppen/spor-loader";
 import React from "react";
+
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";
 

package/src/loader/DarkInlineLoader.tsx

@@ -2,6 +2,7 @@
 import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
 import { inlineLoaderDarkData } from "@vygruppen/spor-loader";
 import React from "react";
+
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";
 

package/src/loader/DarkSpinner.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { spinnerDarkData, spinnerLightData } from "@vygruppen/spor-loader";
 import React from "react";
+
 import { Box, BoxProps, Center, useColorMode, VisuallyHidden } from "..";
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";

package/src/loader/LightFullScreenLoader.tsx

@@ -2,6 +2,7 @@
 import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
 import { fullScreenLoaderBlackData } from "@vygruppen/spor-loader";
 import React from "react";
+
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";
 

package/src/loader/LightInlineLoader.tsx

@@ -2,6 +2,7 @@
 import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
 import { inlineLoaderLightData } from "@vygruppen/spor-loader";
 import React from "react";
+
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";
 

package/src/loader/LightSpinner.tsx

@@ -2,6 +2,7 @@
 import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
 import { spinnerLightData } from "@vygruppen/spor-loader";
 import React from "react";
+
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";
 

package/src/loader/Lottie.tsx

@@ -1,6 +1,5 @@
-import React from "react";
-
 import ReactLottie from "lottie-react";
+import React from "react";
 
 /**
  * A wrapper around Lottie to make it tree-shakeable for SSR.

package/src/loader/ProgressBar.tsx

@@ -2,11 +2,12 @@
 import {
   BoxProps,
   Progress,
-  UseProgressProps,
   RecipeVariantProps,
+  UseProgressProps,
   useSlotRecipe,
 } from "@chakra-ui/react";
 import React, { forwardRef, PropsWithChildren } from "react";
+
 import { progressBarRecipe } from "../theme/slot-recipes/progress-bar";
 import { useRotatingLabel } from "./useRotatingLabel";
 

package/src/loader/ProgressLoader.tsx

@@ -6,11 +6,12 @@ import {
   RecipeVariantProps,
   Text,
 } from "@chakra-ui/react";
-import React, { forwardRef, useId, useRef, useState, useEffect } from "react";
+import React, { forwardRef, useEffect, useId, useRef, useState } from "react";
 import { useProgressBar } from "react-aria";
+
 import { createTexts, useTranslation } from "..";
-import { useRotatingLabel } from "./useRotatingLabel";
 import { progressLoaderRecipe } from "../theme/recipes/progress-loader";
+import { useRotatingLabel } from "./useRotatingLabel";
 export type ProgressLoaderVariantProps = RecipeVariantProps<
   typeof progressLoaderRecipe
 >;

package/src/loader/Skeleton.tsx

@@ -1,19 +1,20 @@
 "use client";
-import { skeletonRecipe } from "@/theme/recipes/skeleton";
 import type {
-  SkeletonProps as ChakraSkeletonProps,
   CircleProps,
   RecipeVariantProps,
+  SkeletonProps as ChakraSkeletonProps,
 } from "@chakra-ui/react";
 import {
-  Skeleton as ChakraSkeleton,
   Circle,
+  Skeleton as ChakraSkeleton,
   Stack,
   useRecipe,
 } from "@chakra-ui/react";
 import * as React from "react";
 import { forwardRef } from "react";
 
+import { skeletonRecipe } from "@/theme/recipes/skeleton";
+
 type SkeletonVariantProps = RecipeVariantProps<typeof skeletonRecipe>;
 
 export type SkeletonCircleProps = ChakraSkeletonProps &