Merge branch 'feat/animation' of https://github.com/ruru-m07/ruru-ui …

…into feat/animation
ruru-m07 · Aug 16, 2024 · 480b175 · 480b175
2 parents 66318c2 + 0bf14aa
commit 480b175
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/apps/www/public/registry/components/button.json b/apps/www/public/registry/components/button.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "name": "button.tsx",
-      "content": "\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { Spinner } from \"./spinner\";\nimport { motion } from \"framer-motion\";\nimport { useRuru } from \"../provider\";\n\nexport const buttonVariants = cva(\n  \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow hover:bg-primary/85 hover:shadow-md\",\n        secondary:\n          \"border-input border-[1.5px] bg-primary-foreground hover:bg-[#f3f3f3] dark:hover:bg-[#202020]\",\n        tertiary: \"text-primary hover:bg-[#f3f3f3] dark:hover:bg-[#202020]\",\n        error: \"bg-[#d93036] hover:bg-[#ff6166]\",\n        warning: \"bg-[#ff990a] text-primary-foreground hover:bg-[#d27504]\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2\",\n        small: \"h-8 rounded-md px-3 text-xs\",\n        large: \"h-10 rounded-md px-8\",\n        icon: \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends Omit<\n      React.ButtonHTMLAttributes<HTMLButtonElement>,\n      \"prefix\" | \"suffix\"\n    >,\n    VariantProps<typeof buttonVariants> {\n  \n  asChild?: boolean;\n  \n  prefix?: React.ReactNode;\n  \n  suffix?: React.ReactNode;\n  \n  disabled?: boolean;\n  \n  loading?: boolean;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      size = \"default\",\n      asChild = false,\n      prefix,\n      suffix,\n      disabled = false,\n      loading = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const { animation } = useRuru();\n\n    const Comp = asChild ? Slot : \"button\";\n\n    const buttonContent = (\n      <Comp\n        className={cn(\n          buttonVariants({\n            variant: loading ? \"secondary\" : variant,\n            size,\n          }),\n          className,\n        )}\n        ref={ref}\n        disabled={disabled}\n        {...props}\n      >\n        {loading ? <Spinner className=\"mr-2\" /> : null}\n        {prefix ? (\n          <span className=\"mr-2 flex items-center justify-center\">\n            {prefix}\n          </span>\n        ) : null}\n        {props.children}\n        {suffix ? (\n          <span className=\"ml-2 flex items-center justify-center\">\n            {suffix}\n          </span>\n        ) : null}\n      </Comp>\n    );\n\n    return (\n      <div className={disabled ? \" cursor-not-allowed \" : undefined}>\n        {animation ? (\n          <motion.div whileTap={{ scale: 0.93 }}>{buttonContent}</motion.div>\n        ) : (\n          buttonContent\n        )}\n      </div>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n"
+      "content": "\"use client\";\r\n\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport React from \"react\";\r\nimport { cn } from \"@/utils/cn\";\r\nimport { Spinner } from \"./spinner\";\r\nimport { motion } from \"framer-motion\";\r\nimport { useRuru } from \"@/provider\";\r\n\r\nexport const buttonVariants = cva(\r\n  \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default:\r\n          \"bg-primary text-primary-foreground shadow hover:bg-primary/85 hover:shadow-md\",\r\n        secondary:\r\n          \"border-input border-[1.5px] bg-primary-foreground hover:bg-[#f3f3f3] dark:hover:bg-[#202020]\",\r\n        tertiary: \"text-primary hover:bg-[#f3f3f3] dark:hover:bg-[#202020]\",\r\n        error: \"bg-[#d93036] hover:bg-[#ff6166]\",\r\n        warning: \"bg-[#ff990a] text-primary-foreground hover:bg-[#d27504]\",\r\n      },\r\n      size: {\r\n        default: \"h-9 px-4 py-2\",\r\n        small: \"h-8 rounded-md px-3 text-xs\",\r\n        large: \"h-10 rounded-md px-8\",\r\n        icon: \"size-9\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n      size: \"default\",\r\n    },\r\n  },\r\n);\r\n\r\nexport interface ButtonProps\r\n  extends Omit<\r\n      React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n      \"prefix\" | \"suffix\"\r\n    >,\r\n    VariantProps<typeof buttonVariants> {\r\n  \r\n  asChild?: boolean;\r\n  \r\n  prefix?: React.ReactNode;\r\n  \r\n  suffix?: React.ReactNode;\r\n  \r\n  disabled?: boolean;\r\n  \r\n  loading?: boolean;\r\n}\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n  (\r\n    {\r\n      className,\r\n      variant = \"default\",\r\n      size = \"default\",\r\n      asChild = false,\r\n      prefix,\r\n      suffix,\r\n      disabled = false,\r\n      loading = false,\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    const { animation } = useRuru();\r\n\r\n    const Comp = asChild ? Slot : \"button\";\r\n\r\n    const buttonContent = (\r\n      <Comp\r\n        className={cn(\r\n          buttonVariants({\r\n            variant: loading ? \"secondary\" : variant,\r\n            size,\r\n          }),\r\n          className,\r\n        )}\r\n        ref={ref}\r\n        disabled={disabled}\r\n        {...props}\r\n      >\r\n        {loading ? <Spinner className=\"mr-2\" /> : null}\r\n        {prefix ? (\r\n          <span className=\"mr-2 flex items-center justify-center\">\r\n            {prefix}\r\n          </span>\r\n        ) : null}\r\n        {props.children}\r\n        {suffix ? (\r\n          <span className=\"ml-2 flex items-center justify-center\">\r\n            {suffix}\r\n          </span>\r\n        ) : null}\r\n      </Comp>\r\n    );\r\n\r\n    return (\r\n      <div className={disabled ? \" cursor-not-allowed \" : undefined}>\r\n        {animation ? (\r\n          <motion.div whileTap={{ scale: 0.93 }}>{buttonContent}</motion.div>\r\n        ) : (\r\n          buttonContent\r\n        )}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nButton.displayName = \"Button\";\r\n"
     }
   ],
   "type": "components:ui",

diff --git a/packages/ui/src/components/button.tsx b/packages/ui/src/components/button.tsx
@@ -6,7 +6,7 @@ import React from "react";
 import { cn } from "@/utils/cn";
 import { Spinner } from "./spinner";
 import { motion } from "framer-motion";
-import { useRuru } from "../provider";
+import { useRuru } from "@/provider";
 
 export const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",