@vygruppen/spor-react 12.4.7 → 12.4.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "12.4.7",
+  "version": "12.4.9",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -45,9 +45,9 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
-    "@vygruppen/spor-design-tokens": "4.0.7",
+    "@vygruppen/spor-loader": "0.6.0",
     "@vygruppen/spor-icon-react": "4.1.0",
-    "@vygruppen/spor-loader": "0.6.0"
+    "@vygruppen/spor-design-tokens": "4.0.7"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.0",

package/src/accordion/Accordion.tsx

@@ -75,7 +75,13 @@ export const AccordionItemTrigger = forwardRef<
   HTMLButtonElement,
   AccordionItemTriggerProps
 >(function AccordionItemTrigger(props, ref) {
-  const { startElement, children, headingLevel, ...rest } = props;
+  const {
+    startElement,
+    children,
+    headingLevel,
+    showChevron = true,
+    ...rest
+  } = props;
   warnAboutMismatchingIcon({ icon: startElement });
   const recipe = useSlotRecipe({ key: "accordion" });
   const styles = recipe();
@@ -86,10 +92,11 @@ export const AccordionItemTrigger = forwardRef<
           {startElement && startElement}
           {children}
         </HStack>
-
-        <ChakraAccordion.ItemIndicator>
-          <DropdownDownFill24Icon />
-        </ChakraAccordion.ItemIndicator>
+        {showChevron && (
+          <ChakraAccordion.ItemIndicator>
+            <DropdownDownFill24Icon />
+          </ChakraAccordion.ItemIndicator>
+        )}
       </ChakraAccordion.ItemTrigger>
     </Box>
   );

package/src/accordion/types.ts

@@ -41,6 +41,7 @@ export type AccordionItemTriggerProps = Omit<
   HeadingLevel & {
     /** Icon to be displayed on the left of the trigger button. Use 24px outline. */
     startElement?: React.ReactNode;
+    showChevron?: boolean;
   };
 
 export type AccordionItemContentProps = ChakraAccordion.ItemContentProps & {

package/src/input/SearchInput.tsx

@@ -31,7 +31,7 @@ export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
         type="search"
         variant={variant}
         {...props}
-        startElement={<SearchOutline24Icon />}
+        startElement={<SearchOutline24Icon color="icon" />}
         endElement={
           clearButton && (
             <IconButton

package/src/logo/VyLogo.tsx

@@ -1,5 +1,5 @@
-import { BoxProps, chakra } from "@chakra-ui/react";
-import React, { forwardRef, useId } from "react";
+import { chakra } from "@chakra-ui/react";
+import { ComponentProps, forwardRef, useId } from "react";
 
 export const SvgBox = chakra("svg");
 
@@ -27,7 +27,7 @@ const Path = chakra("path", fillRecipe);
 
 const SVGGroup = chakra("g", fillRecipe);
 
-type VyLogoProps = BoxProps & React.SVGProps<SVGSVGElement>;
+type VyLogoProps = ComponentProps<typeof SvgBox>;
 
 export const VyLogo = forwardRef<SVGSVGElement, VyLogoProps>((props, ref) => {
   const id = useId();

package/src/logo/VyLogoPride.tsx

@@ -1,9 +1,8 @@
-import { BoxProps } from "@chakra-ui/react";
-import { forwardRef, useId } from "react";
+import { ComponentProps, forwardRef, useId } from "react";
 
 import { SvgBox } from "./VyLogo";
 
-export type VyLogoPrideProps = BoxProps;
+type VyLogoPrideProps = ComponentProps<typeof SvgBox>;
 
 export const VyLogoPride = forwardRef<SVGSVGElement, VyLogoPrideProps>(
   (props, ref) => {

package/src/table/Table.tsx

@@ -1,6 +1,5 @@
 "use client";
 import {
-  Box,
   RecipeVariantProps,
   Table as ChakraTable,
   TableRootProps as ChakraTableProps,
@@ -39,27 +38,16 @@ export const Table = forwardRef<HTMLTableElement, TableProps>((props, ref) => {
   const recipe = useSlotRecipe({ recipe: tableSlotRecipe });
   const styles = recipe({ variant, size });
   return (
-    <Box overflowX="auto" role="region" {...getStyleProps(props)} {...props}>
-      <ChakraTable.Root
-        variant={variant}
-        size={size}
-        colorPalette={colorPalette}
-        css={styles}
-        ref={ref}
-      >
-        {children}
-      </ChakraTable.Root>
-    </Box>
+    <ChakraTable.Root
+      variant={variant}
+      size={size}
+      colorPalette={colorPalette}
+      css={styles}
+      ref={ref}
+      {...props}
+    >
+      {children}
+    </ChakraTable.Root>
   );
 });
 Table.displayName = "Table";
-
-function getStyleProps(props: TableProps) {
-  return props.variant === "core"
-    ? {
-        borderRadius: "sm",
-        border: "sm",
-        borderColor: "outline.disabled",
-      }
-    : {};
-}

package/src/table/index.tsx

@@ -15,6 +15,7 @@ export {
   TableCaption,
   TableCell,
   TableColumn,
+  TableColumnGroup,
   TableColumnHeader,
   TableFooter,
   TableHeader,

package/src/theme/recipes/input.ts

@@ -11,6 +11,7 @@ export const inputRecipe = defineRecipe({
     borderRadius: "sm",
     transitionProperty: "common",
     transitionDuration: "fast",
+    color: "text",
     position: "relative",
     paddingX: 3,
     paddingTop: 3,

package/src/theme/slot-recipes/table.ts

@@ -22,15 +22,12 @@ export const tableSlotRecipe = defineSlotRecipe({
     columnHeader: {
       fontWeight: "bold",
       textAlign: "start",
-      borderBottom: "sm",
-      borderColor: "outline.disabled",
+
       ...numericStyles,
       paddingX: 1.5,
       paddingY: 1,
     },
     row: {
-      borderBottom: "sm",
-      borderColor: "outline.disabled",
       ...numericStyles,
     },
     cell: {
@@ -85,7 +82,6 @@ export const tableSlotRecipe = defineSlotRecipe({
           backgroundColor: "none",
         },
         columnHeader: {
-          borderLeft: "none",
           borderBottom: "sm",
           borderColor: "outline.disabled",
           backgroundColor: "none",
@@ -93,46 +89,59 @@ export const tableSlotRecipe = defineSlotRecipe({
         },
 
         cell: {
+          ...numericStyles,
+        },
+        row: {
           borderBottom: "sm",
           borderColor: "outline.disabled",
           ...numericStyles,
-          _first: {
-            borderLeft: "none",
-          },
         },
       },
 
       core: {
+        root: {
+          boxShadow: "0 0 0 1px var(--shadow-color)",
+          shadowColor: "outline.disabled",
+          borderRadius: "sm",
+        },
+
         table: {
-          borderRadius: "md",
           overflow: "hidden",
-          border: "sm",
-          borderColor: "outline.disabled",
         },
         cell: {
-          borderLeft: "sm",
-          borderColor: "outline.disabled",
           ...numericStyles,
-          _first: {
-            borderLeft: "none",
+
+          borderRight: "sm",
+          borderColor: "outline.disabled",
+
+          _last: {
+            borderRight: "none",
           },
         },
-        header: {
-          border: "none",
-        },
+
         columnHeader: {
-          borderBottom: "sm",
-          borderLeft: "sm",
-          borderLeftColor: "outline.disabled",
           ...numericStyles,
+
+          borderRight: "sm",
+          borderColor: "outline.disabled",
+
           _first: {
-            borderLeft: "none",
+            borderTopLeftRadius: "sm",
+          },
+          _last: {
+            borderTopRightRadius: "sm",
+            borderRight: "none",
           },
         },
+        header: {
+          borderBottom: "sm",
+          borderColor: "outline.disabled",
+        },
         row: {
           ...numericStyles,
           borderBottom: "sm",
           borderColor: "outline.disabled",
+
           _last: {
             borderBottom: "none",
           },