chore: collapse transition improved, card old styles removed

packages/components/card/src/card.styles.ts

@@ -1,144 +0,0 @@
-import {styled} from "@nextui-org/system";
-import {cssFocusVisible, cssNoBlurriness} from "@nextui-org/shared-css";
-
-export const StyledCard = styled(
-  "div",
-  {
-    $$cardColor: "$colors$backgroundContrast",
-    $$cardTextColor: "$colors$text",
-    m: 0,
-    p: 0,
-    br: "$lg",
-    bg: "$$cardColor",
-    color: "$$cardTextColor",
-    position: "relative",
-    display: "flex",
-    overflow: "hidden",
-    fd: "column",
-    width: "100%",
-    height: "auto",
-    boxSizing: "border-box",
-    "@motion": {
-      transition: "none",
-    },
-    ".nextui-image": {
-      width: "100%",
-    },
-    ".nextui-drip": {
-      zIndex: "$1",
-      ".nextui-drip-filler": {
-        opacity: 0.25,
-        fill: "$accents6",
-      },
-    },
-    variants: {
-      variant: {
-        flat: {
-          bg: "$accents0",
-        },
-        shadow: {
-          dropShadow: "$lg",
-          "@safari": {
-            boxShadow: "$lg",
-            dropShadow: "none",
-          },
-          // firefox
-          "@-moz-document url-prefix()": {
-            boxShadow: "$lg",
-            dropShadow: "none",
-          },
-        },
-        bordered: {
-          borderStyle: "solid",
-          borderColor: "$border",
-        },
-      },
-      borderWeight: {
-        light: {
-          bw: "$light",
-        },
-        normal: {
-          bw: "$normal",
-        },
-        bold: {
-          bw: "$bold",
-        },
-        extrabold: {
-          bw: "$extrabold",
-        },
-        black: {
-          bw: "$black",
-        },
-      },
-      disableAnimation: {
-        true: {
-          transition: "none",
-        },
-        false: {
-          transition: "$card",
-        },
-      },
-      isPressable: {
-        true: {
-          cursor: "pointer",
-          us: "none",
-          WebkitTapHighlightColor: "transparent",
-        },
-      },
-      isPressed: {
-        true: {},
-      },
-      isHovered: {
-        true: {
-          dropShadow: "$lg",
-          "@safari": {
-            boxShadow: "$lg",
-            dropShadow: "none",
-          },
-          // firefox
-          "@-moz-document url-prefix()": {
-            boxShadow: "$lg",
-            dropShadow: "none",
-          },
-        },
-      },
-    },
-    compoundVariants: [
-      //  isPreseed && !disableAnimation
-      {
-        isPressed: true,
-        disableAnimation: false,
-        css: {
-          transform: "scale(0.97)",
-        },
-      },
-      // isHovered && !disableAnimation
-      {
-        isHovered: true,
-        disableAnimation: false,
-        css: {
-          transform: "translateY(-2px)",
-        },
-      },
-      // isHovered && variant === 'shadow'
-      {
-        isHovered: true,
-        variant: "shadow",
-        css: {
-          dropShadow: "$xl",
-          "@safari": {
-            boxShadow: "$xl",
-            dropShadow: "none",
-          },
-          // firefox
-          "@-moz-document url-prefix()": {
-            boxShadow: "$xl",
-            dropShadow: "none",
-          },
-        },
-      },
-    ],
-  },
-  cssNoBlurriness,
-  cssFocusVisible,
-);

packages/components/card/src/index.ts

@@ -5,6 +5,9 @@ export type {CardFooterProps} from "./card-footer";
 // export hooks
 export {useCard} from "./use-card";
 
+// export context
+export * from "./card-context";
+
 // export components
 export {default as Card} from "./card";
 export {default as CardHeader} from "./card-header";

packages/storybook/.storybook/main.js

@@ -1,23 +1,9 @@
 module.exports = {
   stories: [
     './welcome.stories.mdx', // default page
+    '../../components/**/stories/**/*.stories.mdx',
+    '../../components/**/stories/**/*.stories.@(js|jsx|ts|tsx)',
     "../../core/theme/stories/*.stories.@(js|jsx|ts|tsx)",
-    "../../components/link/stories/*.stories.@(js|jsx|ts|tsx)",
-    "../../components/avatar/stories/*.stories.@(js|jsx|ts|tsx)",
-    "../../components/user/stories/*.stories.@(js|jsx|ts|tsx)",
-    "../../components/button/stories/*.stories.@(js|jsx|ts|tsx)",
-    "../../components/spinner/stories/*.stories.@(js|jsx|ts|tsx)",
-    "../../components/code/stories/*.stories.@(js|jsx|ts|tsx)",
-    "../../components/tooltip/stories/*.stories.@(js|jsx|ts|tsx)",
-    "../../components/snippet/stories/*.stories.@(js|jsx|ts|tsx)",
-    "../../components/chip/stories/*.stories.@(js|jsx|ts|tsx)",
-    "../../components/badge/stories/*.stories.@(js|jsx|ts|tsx)",
-    "../../components/checkbox/stories/*.stories.@(js|jsx|ts|tsx)",
-    "../../components/radio/stories/*.stories.@(js|jsx|ts|tsx)",
-    "../../components/pagination/stories/*.stories.@(js|jsx|ts|tsx)",
-    "../../components/switch/stories/*.stories.@(js|jsx|ts|tsx)",
-    "../../components/accordion/stories/*.stories.@(js|jsx|ts|tsx)",
-    "../../components/card/stories/*.stories.@(js|jsx|ts|tsx)",
   ],
   staticDirs: ["../public"],
   addons: [

packages/utilities/framer-transitions/src/collapse-transition.tsx

@@ -53,7 +53,7 @@ const defaultTransitions = {
   },
   enter: {
     height: {
-      duration: 0.4,
+      duration: 0.6,
       ease: TRANSITION_EASINGS.softSpring,
     },
     opacity: {
@@ -61,7 +61,7 @@ const defaultTransitions = {
       ease: TRANSITION_EASINGS.ease,
     },
     y: {
-      duration: 0.5,
+      duration: 0.6,
       ease: TRANSITION_EASINGS.ease,
     },
   },