@codefast/ui 0.0.24 → 0.0.25

package/animate.plugin.ts

@@ -0,0 +1,277 @@
+import plugin from "tailwindcss/plugin";
+import { type Config } from "tailwindcss/types/config";
+
+type Theme = <TDefaultValue = Config["theme"]>(path?: string, defaultValue?: TDefaultValue) => TDefaultValue;
+
+const animate = plugin(
+  ({ addUtilities, matchUtilities, theme }) => {
+    addUtilities({
+      "@keyframes enter": {
+        from: {
+          opacity: "var(--animate-enter-opacity, 1)",
+          transform: [
+            "translate3d(var(--animate-enter-translate-x, 0), var(--animate-enter-translate-y, 0), 0)",
+            "scale3d(var(--animate-enter-scale, 1), var(--animate-enter-scale, 1), var(--animate-enter-scale, 1))",
+            "rotate(var(--animate-enter-rotate, 0))",
+          ].join(" "),
+        },
+      },
+
+      "@keyframes exit": {
+        to: {
+          opacity: "var(--animate-exit-opacity, 1)",
+          transform: [
+            "translate3d(var(--animate-exit-translate-x, 0), var(--animate-exit-translate-y, 0), 0)",
+            "scale3d(var(--animate-exit-scale, 1), var(--animate-exit-scale, 1), var(--animate-exit-scale, 1))",
+            "rotate(var(--animate-exit-rotate, 0))",
+          ].join(" "),
+        },
+      },
+
+      ".animate-in": {
+        animationName: "enter",
+        animationDuration: theme("animationDuration.DEFAULT"),
+        "--animate-enter-opacity": "initial",
+        "--animate-enter-scale": "initial",
+        "--animate-enter-rotate": "initial",
+        "--animate-enter-translate-x": "initial",
+        "--animate-enter-translate-y": "initial",
+      },
+
+      ".animate-out": {
+        animationName: "exit",
+        animationDuration: theme("animationDuration.DEFAULT"),
+        "--animate-exit-opacity": "initial",
+        "--animate-exit-scale": "initial",
+        "--animate-exit-rotate": "initial",
+        "--animate-exit-translate-x": "initial",
+        "--animate-exit-translate-y": "initial",
+      },
+    });
+
+    addUtilities({
+      ".animation-running": {
+        animationPlayState: "running",
+      },
+      ".animation-paused": {
+        animationPlayState: "paused",
+      },
+    });
+
+    // Delay
+    matchUtilities(
+      {
+        "animation-delay": (value) => ({
+          animationDelay: value,
+        }),
+      },
+      {
+        values: theme("animationDelay"),
+      },
+    );
+
+    // Direction
+    matchUtilities(
+      {
+        "animation-direction": (value) => ({
+          animationDirection: value,
+        }),
+      },
+      {
+        values: theme("animationDirection"),
+      },
+    );
+
+    // Duration
+    matchUtilities(
+      {
+        "animation-duration": (value) => ({
+          animationDuration: value,
+        }),
+      },
+      {
+        values: theme("animationDuration"),
+      },
+    );
+
+    // Fill mode
+    matchUtilities(
+      {
+        "animation-fill-mode": (value) => ({
+          animationFillMode: value,
+        }),
+      },
+      {
+        values: theme("animationFillMode"),
+      },
+    );
+
+    // Opacity
+    matchUtilities(
+      {
+        "fade-in": (value) => ({
+          "--animate-enter-opacity": value,
+        }),
+        "fade-out": (value) => ({
+          "--animate-exit-opacity": value,
+        }),
+      },
+      {
+        values: theme("animationOpacity"),
+      },
+    );
+
+    // Repeat
+    matchUtilities(
+      {
+        "animation-repeat": (value) => ({
+          animationIterationCount: value,
+        }),
+      },
+      {
+        values: theme("animationRepeat"),
+      },
+    );
+
+    // Rotate
+    matchUtilities(
+      {
+        "spin-in": (value) => ({
+          "--animate-enter-rotate": value,
+        }),
+        "spin-out": (value) => ({
+          "--animate-exit-rotate": value,
+        }),
+      },
+      {
+        values: theme("animationRotate"),
+      },
+    );
+
+    // Scale - Zoom
+    matchUtilities(
+      {
+        "zoom-in": (value) => ({
+          "--animate-enter-scale": value,
+        }),
+        "zoom-out": (value) => ({
+          "--animate-exit-scale": value,
+        }),
+      },
+      {
+        values: theme("animationScale"),
+      },
+    );
+
+    // Timing function
+    matchUtilities(
+      {
+        "animation-ease": (value) => ({
+          animationTimingFunction: value,
+        }),
+      },
+      {
+        values: theme("animationTimingFunction"),
+      },
+    );
+
+    // Translate - Slide
+    matchUtilities(
+      {
+        "slide-in-from-top": (value) => ({
+          "--animate-enter-translate-y": `-${value}`,
+        }),
+
+        "slide-in-from-bottom": (value) => ({
+          "--animate-enter-translate-y": value,
+        }),
+
+        "slide-in-from-left": (value) => ({
+          "--animate-enter-translate-x": `-${value}`,
+        }),
+
+        "slide-in-from-right": (value) => ({
+          "--animate-enter-translate-x": value,
+        }),
+
+        "slide-out-to-top": (value) => ({
+          "--animate-exit-translate-y": `-${value}`,
+        }),
+
+        "slide-out-to-bottom": (value) => ({
+          "--animate-exit-translate-y": value,
+        }),
+
+        "slide-out-to-left": (value) => ({
+          "--animate-exit-translate-x": `-${value}`,
+        }),
+
+        "slide-out-to-right": (value) => ({
+          "--animate-exit-translate-x": value,
+        }),
+      },
+      {
+        values: theme("animationTranslate"),
+      },
+    );
+  },
+  {
+    theme: {
+      extend: {
+        animationDelay: ({ theme }: { theme: Theme }) => ({
+          ...theme("transitionDelay"),
+        }),
+
+        animationDirection: {
+          normal: "normal",
+          reverse: "reverse",
+          alternate: "alternate",
+          "alternate-reverse": "alternate-reverse",
+        },
+
+        animationDuration: ({ theme }: { theme: Theme }) => ({
+          ...theme("transitionDuration"),
+        }),
+
+        animationFillMode: {
+          none: "none",
+          forwards: "forwards",
+          backwards: "backwards",
+          both: "both",
+        },
+
+        animationOpacity: ({ theme }: { theme: Theme }) => ({
+          DEFAULT: 0,
+          ...theme("opacity"),
+        }),
+
+        animationRepeat: {
+          0: "0",
+          1: "1",
+          infinite: "infinite",
+        },
+
+        animationRotate: ({ theme }: { theme: Theme }) => ({
+          DEFAULT: "30deg",
+          ...theme("rotate"),
+        }),
+
+        animationScale: ({ theme }: { theme: Theme }) => ({
+          DEFAULT: 0,
+          ...theme("scale"),
+        }),
+
+        animationTimingFunction: ({ theme }: { theme: Theme }) => ({
+          ...theme("transitionTimingFunction"),
+        }),
+
+        animationTranslate: ({ theme }: { theme: Theme }) => ({
+          DEFAULT: "100%",
+          ...theme("translate"),
+        }),
+      },
+    },
+  },
+);
+
+export default animate;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codefast/ui",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "license": "MIT",
   "sideEffects": [
     "**/*.css"
@@ -330,7 +330,10 @@
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "animate.plugin.ts",
+    "perspective.plugin.ts",
+    "tailwind.config.ts"
   ],
   "dependencies": {
     "@radix-ui/primitive": "^1.0.1",

package/perspective.plugin.ts

@@ -0,0 +1,11 @@
+import plugin from "tailwindcss/plugin";
+
+const perspective = plugin(({ matchUtilities }) => {
+  matchUtilities({
+    perspective: (value) => ({
+      perspective: value,
+    }),
+  });
+});
+
+export default perspective;

package/tailwind.config.ts

@@ -0,0 +1,113 @@
+import type { Config } from "tailwindcss";
+import { fontFamily } from "tailwindcss/defaultTheme";
+import animate from "./animate.plugin";
+import perspective from "./perspective.plugin";
+
+const config: Config = {
+  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
+  darkMode: ["class"],
+  plugins: [animate, perspective],
+  theme: {
+    extend: {
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        "caret-blink": "caret-blink 1.25s ease-out infinite",
+      },
+      borderRadius: {
+        sm: "calc(var(--radius, 0.25rem) - 0.125px)", // 2px
+        DEFAULT: "var(--radius, 0.25rem)", // 4px
+        md: "calc(var(--radius, 0.25rem) + 0.125rem)", // 6px
+        lg: "calc(var(--radius, 0.25rem) + 0.25rem)", // 8px
+        xl: "calc(var(--radius, 0.25rem) + 0.5rem)", // 12px
+        "2xl": "calc(var(--radius, 0.25rem) + 0.75rem)", // 16px
+        "3xl": "calc(var(--radius, 0.25rem) + 1.25rem)", // 24px
+      },
+      colors: {
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        background: "hsl(var(--background))",
+        border: "hsl(var(--border))",
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        compound: "hsl(var(--compound))",
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        foreground: "hsl(var(--foreground))",
+        info: {
+          DEFAULT: "hsl(var(--info))",
+          foreground: "hsl(var(--info-foreground))",
+        },
+        input: "hsl(var(--input))",
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        ring: "hsl(var(--ring))",
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        success: {
+          DEFAULT: "hsl(var(--success))",
+          foreground: "hsl(var(--success-foreground))",
+        },
+        warning: {
+          DEFAULT: "hsl(var(--warning))",
+          foreground: "hsl(var(--warning-foreground))",
+        },
+      },
+      fontFamily: {
+        sans: `var(--font-sans, ${fontFamily.sans.join(", ")})`,
+      },
+      keyframes: {
+        "accordion-down": {
+          from: {
+            height: "0",
+          },
+          to: {
+            height: "var(--radix-accordion-content-height)",
+          },
+        },
+        "accordion-up": {
+          from: {
+            height: "var(--radix-accordion-content-height)",
+          },
+          to: {
+            height: "0",
+          },
+        },
+        "caret-blink": {
+          "0%,70%,100%": {
+            opacity: "1",
+          },
+          "20%,50%": {
+            opacity: "0",
+          },
+        },
+      },
+      spacing: {
+        0.75: "0.1875rem", // 3px
+      },
+      transitionDuration: {
+        250: "250ms",
+      },
+    },
+  },
+};
+
+export default config;