@vygruppen/spor-react 9.7.0 → 9.8.1

package/dist/index.js

@@ -907,12 +907,41 @@ var init_RadioCardGroup = __esm({
     };
   }
 });
+exports.StaticCard = void 0;
+var init_StaticCard = __esm({
+  "src/layout/StaticCard.tsx"() {
+    exports.StaticCard = react.forwardRef(
+      ({ colorScheme = "white", children, ...props }, ref) => {
+        const styles3 = react.useStyleConfig("StaticCard", {
+          colorScheme
+        });
+        return /* @__PURE__ */ React73__namespace.default.createElement(react.Box, { __css: styles3, ...props, ref }, children, /* @__PURE__ */ React73__namespace.default.createElement(react.Card, null));
+      }
+    );
+  }
+});
+exports.PressableCard = void 0;
+var init_PressableCard = __esm({
+  "src/layout/PressableCard.tsx"() {
+    exports.PressableCard = ({
+      children,
+      as = "button",
+      variant = "base",
+      ...props
+    }) => {
+      const styles3 = react.useStyleConfig("PressableCard", { variant });
+      return /* @__PURE__ */ React73__namespace.default.createElement(react.Box, { as, __css: styles3, ...props }, children);
+    };
+  }
+});
 var init_layout = __esm({
   "src/layout/index.tsx"() {
     init_Divider();
     init_Stack();
     init_RadioCard();
     init_RadioCardGroup();
+    init_StaticCard();
+    init_PressableCard();
   }
 });
 var AccordionContext, AccordionProvider, useAccordionContext;
@@ -1938,6 +1967,9 @@ var init_Card = __esm({
   "src/card/Card.tsx"() {
     exports.Card = react.forwardRef(
       ({ size: size2 = "sm", colorScheme = "white", children, ...props }, ref) => {
+        console.warn(
+          "Warning: Card is deprecated. Use `StaticCard` or `PressableCard` instead."
+        );
         const styles3 = react.useStyleConfig("Card", {
           colorScheme,
           size: size2
@@ -1947,37 +1979,11 @@ var init_Card = __esm({
     );
   }
 });
-exports.StaticCard = void 0;
-var init_StaticCard = __esm({
-  "src/card/StaticCard.tsx"() {
-    exports.StaticCard = ({ colorScheme, ...props }) => {
-      const styles3 = react.useStyleConfig("StaticCard", { colorScheme });
-      return /* @__PURE__ */ React73__namespace.default.createElement(react.Box, { __css: styles3, ...props });
-    };
-  }
-});
-exports.PressableCard = void 0;
-var init_PressableCard = __esm({
-  "src/card/PressableCard.tsx"() {
-    exports.PressableCard = ({
-      children,
-      as = "button",
-      size: size2 = "sm",
-      variant = "base",
-      ...props
-    }) => {
-      const styles3 = react.useStyleConfig("PressableCard", { variant, size: size2 });
-      return /* @__PURE__ */ React73__namespace.default.createElement(react.Box, { as, __css: styles3, ...props }, children);
-    };
-  }
-});
 
 // src/card/index.tsx
 var init_card = __esm({
   "src/card/index.tsx"() {
     init_Card();
-    init_StaticCard();
-    init_PressableCard();
   }
 });
 exports.Badge = void 0;
@@ -11231,6 +11237,12 @@ function baseBorder(state2, props) {
         )(props)
       };
     }
+    case "active": {
+      return {
+        outline: "2px solid",
+        outlineColor: themeTools.mode("base.outline.light", "base.outline.dark")(props)
+      };
+    }
     case "invalid": {
       return {
         outline: "2px solid",
@@ -15449,7 +15461,6 @@ var config43, static_card_default, getColorSchemeBaseProps2;
 var init_static_card = __esm({
   "src/theme/components/static-card.ts"() {
     init_foundations();
-    init_base_utils();
     init_focus_utils();
     config43 = react.defineStyleConfig({
       baseStyle: (props) => ({
@@ -15459,7 +15470,6 @@ var init_static_card = __esm({
         fontSize: "inherit",
         display: "block",
         borderRadius: "md",
-        // Except for white cards, all cards are light mode always
         color: "text.default.light",
         ...focusVisibleStyles(props),
         ...getColorSchemeBaseProps2(props)
@@ -15471,12 +15481,8 @@ var init_static_card = __esm({
       switch (props.colorScheme) {
         case "white":
           return {
-            ...baseBorder("default", props),
-            backgroundColor: themeTools.mode(
-              "white",
-              `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
-            )(props),
-            color: "inherit"
+            backgroundColor: "white",
+            color: "darkGrey"
           };
         case "grey":
           return {
@@ -15511,33 +15517,13 @@ var init_static_card = __esm({
         }
         default:
           return {
-            backgroundColor: ((_a6 = colors2[props.colorScheme]) == null ? void 0 : _a6[100]) ?? "default",
-            ...baseText("default", props)
+            backgroundColor: ((_a6 = colors2[props.colorScheme]) == null ? void 0 : _a6[100]) ?? "default"
           };
       }
     };
   }
 });
-function getColorSchemeClickableProps2(props) {
-  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)
-        }
-      };
-  }
-}
-var config44, pressable_card_default, getColorSchemeBaseProps3, getColorSchemeHoverProps2, getColorSchemeActiveProps2;
+var config44, pressable_card_default;
 var init_pressable_card = __esm({
   "src/theme/components/pressable-card.ts"() {
     init_base_utils();
@@ -15552,137 +15538,52 @@ var init_pressable_card = __esm({
         fontSize: "inherit",
         display: "block",
         borderRadius: "md",
-        ...getColorSchemeBaseProps3(props),
-        ...getColorSchemeClickableProps2(props),
         ...focusVisibleStyles(props),
-        ...getColorSchemeActiveProps2(props),
-        _hover: getColorSchemeHoverProps2(props),
         _disabled: {
           ...baseBackground("disabled", props),
-          ...baseBorder("disabled", props),
           ...baseText("disabled", props),
+          outline: "none",
           pointerEvents: "none"
         }
       }),
       variants: {
         base: (props) => ({
-          ...baseBackground("default", props),
+          ...baseBorder("default", props),
           _hover: {
-            ...baseBackground("hover", props)
+            ...baseBorder("hover", props)
           },
           _active: {
-            ...baseBackground("active", props)
+            ...baseBackground("active", props),
+            ...baseBorder("active", props)
           }
         }),
         accent: (props) => ({
           ...accentBackground("default", props),
+          boxShadow: "sm",
           _hover: {
-            ...accentBackground("hover", props)
+            ...accentBackground("hover", props),
+            boxShadow: "sm"
           },
           _active: {
-            ...accentBackground("active", props)
+            ...accentBackground("active", props),
+            boxShadow: "none"
           }
         }),
         floating: (props) => ({
           ...floatingBackground("default", props),
-          _hover: {
-            ...floatingBackground("hover", props)
-          },
-          _active: {
-            ...floatingBackground("active", props)
-          }
-        })
-      },
-      sizes: {
-        sm: {
           boxShadow: "sm",
           _hover: {
+            ...floatingBackground("hover", props),
             boxShadow: "md"
           },
           _active: {
+            ...floatingBackground("active", props),
             boxShadow: "none"
           }
-        },
-        lg: {
-          boxShadow: "md",
-          _hover: {
-            boxShadow: "lg"
-          },
-          _active: {
-            boxShadow: "sm"
-          }
-        }
+        })
       }
     });
     pressable_card_default = config44;
-    getColorSchemeBaseProps3 = (props) => {
-      switch (props.colorScheme) {
-        case "default":
-          return {
-            ...baseBorder("default", props),
-            backgroundColor: themeTools.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)
-            }
-          };
-      }
-    };
-    getColorSchemeHoverProps2 = (props) => {
-      switch (props.colorScheme) {
-        case "default":
-          return {
-            backgroundColor: themeTools.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)
-            }
-          };
-      }
-    };
-    getColorSchemeActiveProps2 = (props) => {
-      const { colorScheme } = props;
-      switch (colorScheme) {
-        case "default":
-          return {
-            backgroundColor: themeTools.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)
-            }
-          };
-      }
-    };
   }
 });
 

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, RadioCard, RadioCardGroup, 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-QGMF2EAE.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, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, 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-S335RZ6M.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "9.7.0",
+  "version": "9.8.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/card/Card.tsx

@@ -50,8 +50,15 @@ export type CardProps = Exclude<BoxProps, "size"> & {
  * </Card>
  * ```
  */
+
+/**
+ * @deprecated Card is deprecated. Use `StaticCard` or `PressableCard` instead.
+ */
 export const Card = forwardRef<CardProps, As>(
   ({ size = "sm", colorScheme = "white", children, ...props }, ref) => {
+    console.warn(
+      "Warning: Card is deprecated. Use `StaticCard` or `PressableCard` instead.",
+    );
     const styles = useStyleConfig("Card", {
       colorScheme,
       size,

package/src/card/index.tsx

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

package/src/layout/PressableCard.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { Box, BoxProps, useStyleConfig } from "@chakra-ui/react";
+
+type PressableCardProps = Omit<BoxProps, "as"> & {
+  /** Defaults to "base"  */
+  variant: "floating" | "accent" | "base";
+  /** Defaults to "button"  */
+  as: "button" | "a" | "label";
+};
+
+/**
+ * `PressableCard` is a component that renders a pressable card.
+ *
+ * The `PressableCard` component can be used to create a card that responds to user interactions.
+ * It can be rendered as a button, link, label, or any other HTML element by specifying the `as` prop.
+ * If no `as` prop is provided, it defaults to a button.
+ *
+ * The `size` prop can be used to control the size of the card. It defaults to "sm".
+ * The `variant` prop can be used to control the style variant of the card. It defaults to "base".
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * <PressableCard>
+ *   Content
+ * </PressableCard>
+ * ```
+ *
+ * To render the card as a different HTML element, specify the `as` prop:
+ *
+ * ```tsx
+ * <PressableCard as="a">
+ *   This is now a <a /> element
+ * </PressableCard>
+ * ```
+ *
+ * For a static card with other color schemes, use the `StaticCard` component.
+ *
+ * @see StaticCard
+ */
+
+export const PressableCard = ({
+  children,
+  as = "button",
+  variant = "base",
+  ...props
+}: PressableCardProps) => {
+  const styles = useStyleConfig("PressableCard", { variant });
+  return (
+    <Box as={as} __css={styles} {...props}>
+      {children}
+    </Box>
+  );
+};

package/src/layout/RadioCard.tsx

@@ -12,6 +12,7 @@ import React, { useId } from "react";
 type RadioCardProps = UseRadioProps &
   BoxProps & {
     children: React.ReactNode;
+    /** Defaults to "base" */
     variant: "floating" | "base";
   };
 

package/src/layout/RadioCardGroup.tsx

@@ -9,7 +9,16 @@ import React, { Children } from "react";
 type RadioCardGroupProps = RadioGroupProps & {
   children: React.ReactNode;
   props?: RadioGroupProps;
+  /** Defaults to "row" */
   direction?: StackDirection;
+  /** Defaults to "base" */
+  variant?: string;
+  /** The name of the radio group */
+  name?: string;
+  /** The default value of the radio group */
+  defaultValue?: string;
+  /** The callback function to be called when the radio group value changes */
+  onChange?: (value: string) => void;
 };
 
 /**

package/src/layout/StaticCard.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import {
+  As,
+  Box,
+  BoxProps,
+  useStyleConfig,
+  forwardRef,
+  Card,
+} from "@chakra-ui/react";
+
+export type StaticCardProps = BoxProps & {
+  children: React.ReactNode;
+  /** Defaults to "white" */
+  colorScheme:
+    | "white"
+    | "grey"
+    | "green"
+    | "orange"
+    | "red"
+    | "yellow"
+    | "blue"
+    | "darkBlue"
+    | "darkGreen"
+    | "darkYellow";
+};
+
+/**
+ * `StaticCard` is a component that renders a static card.
+ *
+ * The `StaticCard` component can be used to create a card that does not respond to user interactions.
+ * It can be rendered as any HTML element by specifying the `as` prop.
+ *
+ * The `colorScheme` prop can be used to control the color scheme of the card. It defaults to "white".
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * <StaticCard>
+ *   Content
+ * </StaticCard>
+ * ```
+ *
+ * To render the card as a different HTML element, specify the `as` prop:
+ *
+ * ```tsx
+ * <StaticCard as="section">
+ *   This is now a <section /> element
+ * </StaticCard>
+ * ```
+ *
+ * To change the color scheme of the card, specify the `colorScheme` prop:
+ *
+ * ```tsx
+ * <StaticCard colorScheme="orange">
+ *   An orange card
+ * </StaticCard>
+ * ```
+ *
+ * For a card with click functionality, use the `PressableCard` component.
+ *
+ * @see PressableCard
+ */
+
+export const StaticCard = forwardRef<StaticCardProps, As>(
+  ({ colorScheme = "white", children, ...props }, ref) => {
+    const styles = useStyleConfig("StaticCard", {
+      colorScheme,
+    });
+
+    return (
+      <Box __css={styles} {...props} ref={ref}>
+        {children}
+        <Card />
+      </Box>
+    );
+  },
+);

package/src/layout/index.tsx

@@ -28,3 +28,5 @@ export * from "./Divider";
 export * from "./Stack";
 export * from "./RadioCard";
 export * from "./RadioCardGroup";
+export * from "./StaticCard";
+export * from "./PressableCard";