@vygruppen/spor-react 12.6.4 → 12.7.1

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "12.6.4",
+  "type": "module",
+  "version": "12.7.1",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "require": "./dist/index.cjs"
     },
     "./icons": {
       "types": "./dist/icons/index.d.ts",
       "import": "./dist/icons/index.mjs",
-      "require": "./dist/icons/index.js"
+      "require": "./dist/icons/index.cjs"
     }
   },
   "license": "MIT",
@@ -18,7 +19,7 @@
   "homepage": "https://github.com/nsbno/spor/tree/main/packages/spor-react",
   "repository": {
     "type": "git",
-    "url": "https://github.com/nsbno/spor.git",
+    "url": "git+https://github.com/nsbno/spor.git",
     "directory": "packages/spor-react"
   },
   "dependencies": {
@@ -47,7 +48,7 @@
     "usehooks-ts": "^3.1.0",
     "@vygruppen/spor-design-tokens": "4.0.7",
     "@vygruppen/spor-icon-react": "4.2.1",
-    "@vygruppen/spor-loader": "0.6.0"
+    "@vygruppen/spor-loader": "0.7.0"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.0",
@@ -67,7 +68,7 @@
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.2",
     "@vygruppen/eslint-config": "1.1.1",
-    "@vygruppen/tsconfig": "0.1.0"
+    "@vygruppen/tsconfig": "0.1.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

package/src/button/ButtonGroup.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import {
-  chakra,
   Group as ChakraGroup,
   type GroupProps as ChakraGroupProps,
   type RecipeVariantProps,
+  useRecipe,
 } from "@chakra-ui/react";
 import { forwardRef, PropsWithChildren } from "react";
 
@@ -48,23 +48,13 @@ export type ButtonGroupProps = ChakraGroupProps &
  * </ButtonGroup>
  */
 
-const Group = chakra(ChakraGroup, groupRecipe);
-
 export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
   (props, ref) => {
-    const { children, disabled, grow, attached, ...rest } = props;
+    const recipe = useRecipe({ key: "buttonGroup" });
+    const [recipeProps, restProps] = recipe.splitVariantProps(props);
+    const styles = recipe(recipeProps);
 
-    return (
-      <Group
-        {...rest}
-        ref={ref}
-        attached={attached}
-        grow={grow}
-        disabled={disabled}
-      >
-        {children}
-      </Group>
-    );
+    return <ChakraGroup {...restProps} ref={ref} css={styles} />;
   },
 );
 ButtonGroup.displayName = "ButtonGroup";

package/src/dialog/Dialog.tsx

@@ -41,7 +41,7 @@ export const DialogCloseTrigger = React.forwardRef<
   ChakraDialog.CloseTriggerProps
 >(function DialogCloseTrigger(props, ref) {
   return (
-    <ChakraDialog.CloseTrigger ref={ref} {...props} asChild>
+    <ChakraDialog.CloseTrigger ref={ref} position="absolute" {...props} asChild>
       <CloseButton size="md" />
     </ChakraDialog.CloseTrigger>
   );

package/src/input/AttachedInputs.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import {
-  chakra,
   Group,
   GroupProps,
   RecipeVariantProps,
+  useRecipe,
 } from "@chakra-ui/react";
 import { forwardRef } from "react";
 
@@ -28,11 +28,13 @@ export type AttachedInputsProps = RecipeVariantProps<
 > &
   GroupProps;
 
-const StyledGroup = chakra(Group, attachedInputsRecipe);
-
 export const AttachedInputs = forwardRef<HTMLDivElement, AttachedInputsProps>(
   (props, ref) => {
-    return <StyledGroup ref={ref} attached {...props} />;
+    const recipe = useRecipe({ key: "attachedInputs" });
+    const [recipeProps, restProps] = recipe.splitVariantProps(props);
+    const styles = recipe(recipeProps);
+
+    return <Group ref={ref} css={styles} attached {...restProps} />;
   },
 );
 AttachedInputs.displayName = "AttachedInputs";

package/src/input/Input.tsx

@@ -2,17 +2,15 @@
 
 import {
   Box,
-  chakra,
   Flex,
   Input as ChakraInput,
   InputElement,
+  useRecipe,
 } from "@chakra-ui/react";
 import React, { ComponentProps, forwardRef, ReactNode } from "react";
 
 type ChakraInputProps = ComponentProps<typeof ChakraInput>;
 
-import { inputRecipe } from "@/theme/recipes/input";
-
 import { Field, FieldProps } from "./Field";
 
 export type InputProps = FieldProps &
@@ -21,7 +19,7 @@ export type InputProps = FieldProps &
     "size" | "label" | "colorPalette" | "placeholder"
   > & {
     /** The input's label */
-    label: ReactNode;
+    label?: ReactNode;
     /** Element that shows up to the left */
     startElement?: React.ReactNode;
     /** Element that shows up to the right */
@@ -57,8 +55,6 @@ export type InputProps = FieldProps &
  * @see https://spor.vy.no/components/input
  */
 
-const StyledInput = chakra(ChakraInput, inputRecipe);
-
 export const Input = forwardRef<HTMLInputElement, InputProps>(
   (
     {
@@ -72,6 +68,10 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     },
     ref,
   ) => {
+    const recipe = useRecipe({ key: "input" });
+    const [recipeProps, restProps] = recipe.splitVariantProps(props);
+    const styles = recipe(recipeProps);
+
     return (
       <Field
         invalid={invalid}
@@ -91,16 +91,17 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             {startElement}
           </InputElement>
         )}
-        <StyledInput
+        <ChakraInput
           data-attachable
           ref={ref}
           focusVisibleRing="outside"
           overflow="hidden"
           paddingLeft={startElement ? "2.6rem" : undefined}
           paddingRight={endElement ? "2.6rem" : undefined}
-          {...props}
+          {...restProps}
           className={`peer ${props.className}`}
           placeholder=""
+          css={styles}
         />
         {endElement && (
           <InputElement placement="end" paddingX={2}>

package/src/layout/PressableCard.tsx

@@ -1,5 +1,10 @@
 "use client";
-import { ButtonProps, chakra, RecipeVariantProps } from "@chakra-ui/react";
+import {
+  ButtonProps,
+  chakra,
+  RecipeVariantProps,
+  useRecipe,
+} from "@chakra-ui/react";
 import { forwardRef } from "react";
 
 import { pressableCardRecipe } from "../theme/recipes/pressable-card";
@@ -34,14 +39,16 @@ import { pressableCardRecipe } from "../theme/recipes/pressable-card";
  * @see StaticCard
  */
 
-const PressableCardButton = chakra("button", pressableCardRecipe);
-
 type PressableCardProps = RecipeVariantProps<typeof pressableCardRecipe> &
   ButtonProps;
 
-export const PressableCard = forwardRef<HTMLDivElement, PressableCardProps>(
+export const PressableCard = forwardRef<HTMLButtonElement, PressableCardProps>(
   (props, ref) => {
-    return <PressableCardButton {...props} ref={ref} />;
+    const recipe = useRecipe({ key: "pressableCard" });
+    const [recipeProps, restProps] = recipe.splitVariantProps(props);
+    const styles = recipe(recipeProps);
+
+    return <chakra.button {...restProps} css={styles} ref={ref} />;
   },
 );
 PressableCard.displayName = "PressableCard";

package/src/layout/StaticCard.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { BoxProps, chakra, RecipeVariantProps } from "@chakra-ui/react";
+import { Box, BoxProps, RecipeVariantProps, useRecipe } from "@chakra-ui/react";
 import { forwardRef } from "react";
 
 import { staticCardRecipe } from "../theme/recipes/static-card";
@@ -41,14 +41,16 @@ import { staticCardRecipe } from "../theme/recipes/static-card";
  * @see PressableCard
  */
 
-const StyledCardBox = chakra("div", staticCardRecipe);
-
 export type StaticCardProps = RecipeVariantProps<typeof staticCardRecipe> &
   BoxProps;
 
 export const StaticCard = forwardRef<HTMLDivElement, StaticCardProps>(
   (props, ref) => {
-    return <StyledCardBox {...props} ref={ref}></StyledCardBox>;
+    const recipe = useRecipe({ key: "staticCard" });
+    const [recipeProps, restProps] = recipe.splitVariantProps(props);
+    const styles = recipe(recipeProps);
+
+    return <Box css={styles} {...restProps} ref={ref}></Box>;
   },
 );
 StaticCard.displayName = "StaticCard";

package/src/theme/recipes/index.ts

@@ -3,6 +3,7 @@ import { badgeRecipie } from "./badge";
 import { buttonRecipe } from "./button";
 import { closeButtonRecipe } from "./close-button";
 import { codeRecipie } from "./code";
+import { groupRecipe } from "./group";
 import { inputRecipe } from "./input";
 import { linkRecipe } from "./link";
 import { pressableCardRecipe } from "./pressable-card";
@@ -16,6 +17,7 @@ export const recipes = {
   attachedInputs: attachedInputsRecipe,
   badge: badgeRecipie,
   button: buttonRecipe,
+  buttonGroup: groupRecipe,
   closeButton: closeButtonRecipe,
   code: codeRecipie,
   input: inputRecipe,

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

@@ -277,3 +277,5 @@ export const checkboxCardAnatomy = createAnatomy("checkbox-card", [
   "indicator",
   "content",
 ]);
+
+export { collapsibleAnatomy } from "@ark-ui/react/collapsible";

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

@@ -0,0 +1,21 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+
+import { collapsibleAnatomy } from "./anatomy";
+
+export const collapsibleSlotRecipe = defineSlotRecipe({
+  slots: collapsibleAnatomy.keys(),
+  className: "chakra-collapsible",
+  base: {
+    content: {
+      overflow: "hidden",
+      _open: {
+        animationName: "expand-height, fade-in",
+        animationDuration: "moderate",
+      },
+      _closed: {
+        animationName: "collapse-height, fade-out",
+        animationDuration: "moderate",
+      },
+    },
+  },
+});

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

@@ -5,6 +5,7 @@ import { alertServiceSlotRecipe } from "./alert-service";
 import { breadcrumbSlotRecipe } from "./breadcrumb";
 import { checkboxSlotRecipe } from "./checkbox";
 import { choiceChipSlotRecipe } from "./choice-chip";
+import { collapsibleSlotRecipe } from "./collapsible";
 import { datePickerSlotRecipe } from "./datepicker";
 import { dialogSlotRecipe } from "./dialog";
 import { drawerSlotRecipe } from "./drawer";
@@ -64,4 +65,5 @@ export const slotRecipes = {
   travelTag: travelTagSlotRecipe,
   toast: toastSlotRecipe,
   checkboxCard: choiceChipSlotRecipe,
+  collapsible: collapsibleSlotRecipe,
 };

package/tsup.config.ts

@@ -1,9 +1,15 @@
 import { defineConfig } from "tsup";
 
-export default defineConfig({
+export default defineConfig(({ watch }) => ({
   entry: ["src/index.tsx", "src/icons/index.tsx"],
-  format: ["cjs", "esm"],
+  format: ["esm", "cjs"],
   dts: true,
   treeshake: true,
   sourcemap: true,
-});
+  splitting: false,
+  clean: !watch, // avoid deleting ./dist when dev/watch starts
+  outDir: "dist",
+  outExtension: ({ format }) => ({
+    js: format === "esm" ? ".mjs" : ".cjs",
+  }),
+}));