@vygruppen/spor-react 12.4.6 → 12.4.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "12.4.6",
+  "version": "12.4.8",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -66,7 +66,7 @@
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.2",
-    "@vygruppen/eslint-config": "1.1.0",
+    "@vygruppen/eslint-config": "1.1.1",
     "@vygruppen/tsconfig": "0.1.0"
   },
   "peerDependencies": {

package/src/datepicker/TimePicker.tsx

@@ -45,6 +45,11 @@ type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> &
     minuteInterval?: number;
     /** Whether or not the field is disabled */
     disabled?: boolean;
+    /**
+     * The variant of the time picker.
+     * Defaults to "core".
+     */
+    variant?: "core" | "floating" | "ghost";
   };
 /** A time picker component.
  *

package/src/loader/ProgressBar.tsx

@@ -16,7 +16,7 @@ type ProgressBarVariants = RecipeVariantProps<typeof progressBarRecipe>;
 export type ProgressBarProps = BoxProps &
   UseProgressProps &
   PropsWithChildren<ProgressBarVariants> & {
-    children: React.ReactNode;
+    children?: React.ReactNode;
     /** The height of the progress bar.
      * Defaults to .5rem
      **/
@@ -28,12 +28,12 @@ export type ProgressBarProps = BoxProps &
     width?: BoxProps["width"];
 
     /** Pass if no label is passed to the label */
-    "aria-label": string;
+    "aria-label"?: string;
     /** Optional text shown below the loader.
      *
      * If you pass an array of strings, the text will rotate every 5 seconds. If you want to change the delay, pass the delay in milliseconds to the `labelRotationDelay` prop.
      */
-    label: string | string[];
+    label?: string | string[];
     /** The number of milliseconds a label is shown, if an array of strings is passed to the `label` prop.
      *
      * Defaults to 5000 (5 seconds).

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/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",
           },

package/src/util/externals.tsx

@@ -1,6 +1,7 @@
 /** This file works as a proxy for all Chakra UI exports */
 export type { PortalProps, UseDisclosureProps } from "@chakra-ui/react";
 export {
+  ClientOnly,
   createListCollection,
   defineRecipe,
   defineStyle,