@vygruppen/spor-react 9.6.0 → 9.6.1

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, 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, FullScreenDrawer, 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, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-7VZBL2PP.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, Collapse, 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, FullScreenDrawer, 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, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-XXA3IGVH.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "9.6.0",
+  "version": "9.6.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -22,9 +22,9 @@
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@internationalized/date": "^3.0.1",
-    "@vygruppen/spor-design-tokens": "*",
-    "@vygruppen/spor-icon-react": "*",
-    "@vygruppen/spor-loader": "*",
+    "@vygruppen/spor-design-tokens": ">3.4.0",
+    "@vygruppen/spor-icon-react": ">3.2.3",
+    "@vygruppen/spor-loader": ">0.3.1",
     "awesome-phonenumber": "^5.10.0",
     "deepmerge": "^4.3.1",
     "framer-motion": "^9.1.7",

package/src/card/index.tsx

@@ -1,3 +1,2 @@
 export * from "./Card";
 export * from "./StaticCard";
-export * from "./PressableCard";

package/src/theme/components/index.ts

@@ -40,5 +40,4 @@ export { default as Tabs } from "./tabs";
 export { default as Textarea } from "./textarea";
 export { default as Toast } from "./toast";
 export { default as StaticCard } from "./static-card";
-export { default as PressableCard } from "./pressable-card";
 export { default as TravelTag } from "./travel-tag";

package/src/theme/components/static-card.ts

@@ -1,7 +1,7 @@
 import { defineStyleConfig } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
 import { colors } from "../foundations";
-import { baseBorder, baseText } from "../utils/base-utils";
+import { baseBorder } from "../utils/base-utils";
 
 const config = defineStyleConfig({
   baseStyle: (props: any) => ({
@@ -60,8 +60,7 @@ const getColorSchemeBaseProps = (props: CardThemeProps) => {
     }
     default:
       return {
-        backgroundColor: colors[props.colorScheme]?.[100] ?? "default",
-        ...baseText("default", props),
+        backgroundColor: colors[props.colorScheme]?.[100] ?? "platinum",
       };
   }
 };

package/src/card/PressableCard.tsx

@@ -1,52 +0,0 @@
-import React from "react";
-import { Box, BoxProps, Card, useStyleConfig } from "@chakra-ui/react";
-
-type PressableCardProps = Omit<BoxProps, "as"> & {
-  variant: "floating" | "accent" | "base";
-  size?: "sm" | "lg";
-  as: "button" | "a" | "label" | React.ComponentType;
-};
-
-/**
- * Renders a Pressable card.
- *
- * The most basic version looks like this:
- *
- * ```tsx
- * <PressableCard>
- *   Content
- * </PressableCard>
- * ```
- *
- * There are lots of color schemes available. You can also set the size as either `sm` or `lg`. The default is `sm`.
- *
- * ```tsx
- * <PressableCard colorScheme="orange" size="lg">
- *   A smaller card
- * </PressableCard>
- * ```
- *
- * Pressable cards can also be rendered as button, link or label – like a li (list item) or an article.
- * You do this by specifying the `as` prop. If no `as` is specified, button is chosen as default:
- *
- *
- * ```tsx
- * <PressableCard colorScheme="green" as="section">
- *   This is now a <section /> element
- * </PressableCard>
- * ```
- */
-export const PressableCard = ({
-  children,
-  as = "button",
-  size = "sm",
-  variant = "base",
-  ...props
-}: PressableCardProps) => {
-  const styles = useStyleConfig("PressableCard", { variant, size });
-  return (
-    <Box as={as} __css={styles} {...props}>
-      {children}
-    </Box>
-  );
-};

package/src/theme/components/pressable-card.ts

@@ -1,179 +0,0 @@
-import { defineStyleConfig } from "@chakra-ui/react";
-import { mode } from "@chakra-ui/theme-tools";
-import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
-import { floatingBackground, floatingBorder } from "../utils/floating-utils";
-import { focusVisibleStyles } from "../utils/focus-utils";
-import { accentBackground, accentText } from "../utils/accent-utils";
-
-const config = defineStyleConfig({
-  baseStyle: (props: any) => ({
-    appearance: "none",
-    border: "none",
-    overflow: "hidden",
-    fontSize: "inherit",
-    display: "block",
-    borderRadius: "md",
-    ...getColorSchemeBaseProps(props),
-    ...getColorSchemeClickableProps(props),
-    ...focusVisibleStyles(props),
-    ...getColorSchemeActiveProps(props),
-    _hover: getColorSchemeHoverProps(props),
-    _disabled: {
-      ...baseBackground("disabled", props),
-      ...baseBorder("disabled", props),
-      ...baseText("disabled", props),
-      pointerEvents: "none",
-    },
-  }),
-  variants: {
-    base: (props) => ({
-      ...baseBackground("default", props),
-      _hover: {
-        ...baseBackground("hover", props),
-      },
-      _active: {
-        ...baseBackground("active", props),
-      },
-    }),
-    accent: (props) => ({
-      ...accentBackground("default", props),
-      _hover: {
-        ...accentBackground("hover", props),
-      },
-      _active: {
-        ...accentBackground("active", props),
-      },
-    }),
-    floating: (props) => ({
-      ...floatingBackground("default", props),
-      _hover: {
-        ...floatingBackground("hover", props),
-      },
-      _active: {
-        ...floatingBackground("active", props),
-      },
-    }),
-  },
-  sizes: {
-    sm: {
-      boxShadow: "sm",
-
-      _hover: {
-        boxShadow: "md",
-      },
-
-      _active: {
-        boxShadow: "none",
-      },
-    },
-    lg: {
-      boxShadow: "md",
-
-      _hover: {
-        boxShadow: "lg",
-      },
-
-      _active: {
-        boxShadow: "sm",
-      },
-    },
-  },
-});
-
-export default config;
-
-type CardThemeProps = {
-  colorScheme: "accent" | "default";
-  theme: any;
-  colorMode: "light" | "dark";
-};
-
-const getColorSchemeBaseProps = (props: CardThemeProps) => {
-  switch (props.colorScheme) {
-    case "default":
-      return {
-        ...baseBorder("default", props),
-        backgroundColor: mode(
-          "white",
-          `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`,
-        )(props),
-        color: "inherit",
-      };
-    case "accent":
-      return {
-        ...accentBackground("default", props),
-        ...accentText("default", props),
-        _hover: {
-          ...accentBackground("hover", props),
-        },
-        _active: {
-          ...accentBackground("active", props),
-        },
-      };
-  }
-};
-
-function getColorSchemeClickableProps(props: CardThemeProps) {
-  switch (props.colorScheme) {
-    case "default":
-      return {
-        ...floatingBorder("default", props),
-      };
-    case "accent":
-      return {
-        ...accentBackground("default", props),
-        ...accentText("default", props),
-        _hover: {
-          ...accentBackground("hover", props),
-        },
-        _active: {
-          ...accentBackground("active", props),
-        },
-      };
-  }
-}
-
-const getColorSchemeHoverProps = (props: CardThemeProps) => {
-  switch (props.colorScheme) {
-    case "default":
-      return {
-        backgroundColor: mode(
-          "white",
-          `color-mix(in srgb, white 20%, var(--spor-colors-bg-default-dark))`,
-        )(props),
-        ...floatingBorder("hover", props),
-      };
-    case "accent":
-      return {
-        ...accentBackground("default", props),
-        ...accentText("default", props),
-        _hover: {
-          ...accentBackground("hover", props),
-        },
-        _active: {
-          ...accentBackground("active", props),
-        },
-      };
-  }
-};
-const getColorSchemeActiveProps = (props: CardThemeProps) => {
-  const { colorScheme } = props;
-  switch (colorScheme) {
-    case "default":
-      return {
-        backgroundColor: mode("bg.tertiary.light", `bg.default.dark`)(props),
-        ...floatingBorder("active", props),
-      };
-    case "accent":
-      return {
-        ...accentBackground("default", props),
-        ...accentText("default", props),
-        _hover: {
-          ...accentBackground("hover", props),
-        },
-        _active: {
-          ...accentBackground("active", props),
-        },
-      };
-  }
-};