@codefast/ui 0.0.40 → 0.0.42

package/plugin/animate.plugin.ts

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

package/plugin/base.plugin.ts

@@ -1,20 +1,23 @@
-import plugin from "tailwindcss/plugin";
+import plugin from 'tailwindcss/plugin';
 
 const base = plugin(({ addBase }) => {
   addBase({
-    ".dark": {
-      "color-scheme": "dark",
+    '.dark': {
+      'color-scheme': 'dark',
     },
     body: {
-      "@apply bg-background text-foreground": "",
+      '@apply bg-background text-foreground': '',
     },
-    ":focus-visible": {
-      "@apply outline-ring": "",
+    ':focus-visible': {
+      '@apply outline-ring': '',
     },
     "button, [role='button'], input:where([type='button']), input:where([type='reset']), input:where([type='submit'])":
       {
-        "@apply outline-transparent": "",
+        '@apply outline-transparent': '',
       },
+    a: {
+      '@apply text-primary': '',
+    },
   });
 });
 

package/plugin/perspective.plugin.ts

@@ -1,4 +1,4 @@
-import plugin from "tailwindcss/plugin";
+import plugin from 'tailwindcss/plugin';
 
 const perspective = plugin(({ matchUtilities }) => {
   matchUtilities({

package/src/lib/utils.ts

@@ -1,5 +1,5 @@
-import { twMerge } from "tailwind-merge";
-import { defineConfig } from "cva";
+import { twMerge } from 'tailwind-merge';
+import { defineConfig } from 'cva';
 
 export const {
   cva,

package/src/react/accordion.tsx

@@ -1,15 +1,17 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDownIcon } from "@radix-ui/react-icons";
-import { cn } from "../lib/utils";
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDownIcon } from '@radix-ui/react-icons';
+import { cn } from '../lib/utils';
 
 /* -----------------------------------------------------------------------------
  * Component: Accordion
  * -------------------------------------------------------------------------- */
 
-type AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>;
+type AccordionProps = React.ComponentPropsWithoutRef<
+  typeof AccordionPrimitive.Root
+>;
 const Accordion = AccordionPrimitive.Root;
 
 /* -----------------------------------------------------------------------------
@@ -17,10 +19,19 @@ const Accordion = AccordionPrimitive.Root;
  * -------------------------------------------------------------------------- */
 
 type AccordionItemElement = React.ElementRef<typeof AccordionPrimitive.Item>;
-type AccordionItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>;
-
-const AccordionItem = React.forwardRef<AccordionItemElement, AccordionItemProps>(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
+type AccordionItemProps = React.ComponentPropsWithoutRef<
+  typeof AccordionPrimitive.Item
+>;
+
+const AccordionItem = React.forwardRef<
+  AccordionItemElement,
+  AccordionItemProps
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn('border-b', className)}
+    {...props}
+  />
 ));
 
 AccordionItem.displayName = AccordionPrimitive.Item.displayName;
@@ -29,23 +40,31 @@ AccordionItem.displayName = AccordionPrimitive.Item.displayName;
  * Component: AccordionTrigger
  * -------------------------------------------------------------------------- */
 
-type AccordionTriggerElement = React.ElementRef<typeof AccordionPrimitive.Trigger>;
-type AccordionTriggerProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>;
-
-const AccordionTrigger = React.forwardRef<AccordionTriggerElement, AccordionTriggerProps>(
-  ({ children, className, ...props }, ref) => (
-    <AccordionPrimitive.Header className="flex">
-      <AccordionPrimitive.Trigger
-        ref={ref}
-        className={cn("group flex flex-1 items-center justify-between py-4 text-sm font-medium", className)}
-        {...props}
-      >
-        {children}
-        <ChevronDownIcon className="text-muted-foreground size-4 shrink-0 transition group-data-[state=open]:rotate-180" />
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  ),
-);
+type AccordionTriggerElement = React.ElementRef<
+  typeof AccordionPrimitive.Trigger
+>;
+type AccordionTriggerProps = React.ComponentPropsWithoutRef<
+  typeof AccordionPrimitive.Trigger
+>;
+
+const AccordionTrigger = React.forwardRef<
+  AccordionTriggerElement,
+  AccordionTriggerProps
+>(({ children, className, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'group flex flex-1 items-center justify-between py-4 text-sm font-medium',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="text-muted-foreground size-4 shrink-0 transition group-data-[state=open]:rotate-180" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
 
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 
@@ -53,20 +72,25 @@ AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
  * Component: AccordionContent
  * -------------------------------------------------------------------------- */
 
-type AccordionContentElement = React.ElementRef<typeof AccordionPrimitive.Content>;
-type AccordionContentProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>;
-
-const AccordionContent = React.forwardRef<AccordionContentElement, AccordionContentProps>(
-  ({ children, className, ...props }, ref) => (
-    <AccordionPrimitive.Content
-      ref={ref}
-      className="data-[state=open]:animate-collapsible-open data-[state=closed]:animate-collapsible-closed overflow-hidden text-sm"
-      {...props}
-    >
-      <div className={cn("pb-4 pt-0", className)}>{children}</div>
-    </AccordionPrimitive.Content>
-  ),
-);
+type AccordionContentElement = React.ElementRef<
+  typeof AccordionPrimitive.Content
+>;
+type AccordionContentProps = React.ComponentPropsWithoutRef<
+  typeof AccordionPrimitive.Content
+>;
+
+const AccordionContent = React.forwardRef<
+  AccordionContentElement,
+  AccordionContentProps
+>(({ children, className, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="data-[state=open]:animate-collapsible-open data-[state=closed]:animate-collapsible-closed overflow-hidden text-sm"
+    {...props}
+  >
+    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
 
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;