@codefast/ui 0.0.3 → 0.0.4

package/src/toggle.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { type VariantProps } from "cva";
+import { cva } from "./utils";
+
+/* -----------------------------------------------------------------------------
+ * Variant: Toggle
+ * -------------------------------------------------------------------------- */
+
+const toggleVariants = cva({
+  base: [
+    "hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50",
+    "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  ],
+  variants: {
+    variant: {
+      default: "bg-transparent",
+      outline:
+        "border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-sm",
+    },
+    size: {
+      default: "h-9 px-3",
+      sm: "h-8 px-2",
+      lg: "h-10 px-3",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+});
+
+type ToggleVariantsProps = VariantProps<typeof toggleVariants>;
+
+/* -----------------------------------------------------------------------------
+ * Component: Toggle
+ * -------------------------------------------------------------------------- */
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  TogglePrimitive.ToggleProps & ToggleVariantsProps
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={toggleVariants({ variant, size, className })}
+    {...props}
+  />
+));
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+export { Toggle, toggleVariants, type ToggleVariantsProps };

package/src/tooltip.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "./utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: TooltipProvider
+ * -------------------------------------------------------------------------- */
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+/* -----------------------------------------------------------------------------
+ * Component: Tooltip
+ * -------------------------------------------------------------------------- */
+
+const Tooltip = TooltipPrimitive.Root;
+
+/* -----------------------------------------------------------------------------
+ * Component: TooltipTrigger
+ * -------------------------------------------------------------------------- */
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+/* -----------------------------------------------------------------------------
+ * Component: TooltipPortal
+ * -------------------------------------------------------------------------- */
+
+const TooltipPortal = TooltipPrimitive.Portal;
+
+/* -----------------------------------------------------------------------------
+ * Component: TooltipArrow
+ * -------------------------------------------------------------------------- */
+
+const TooltipArrow = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Arrow>,
+  TooltipPrimitive.TooltipArrowProps
+>((props, ref) => (
+  <TooltipPrimitive.Arrow ref={ref} className="fill-primary" {...props} />
+));
+TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: TooltipContent
+ * -------------------------------------------------------------------------- */
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  TooltipPrimitive.TooltipContentProps
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "bg-primary text-primary-foreground z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs",
+      "data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95",
+      "data-[state=delayed-open]:data-[side=top]:slide-in-from-bottom-2",
+      "data-[state=delayed-open]:data-[side=right]:slide-in-from-left-2",
+      "data-[state=delayed-open]:data-[side=bottom]:slide-in-from-top-2",
+      "data-[state=delayed-open]:data-[side=left]:slide-in-from-right-2",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+      "data-[state=closed]:data-[side=top]:slide-out-to-bottom-2",
+      "data-[state=closed]:data-[side=right]:slide-out-to-left-2",
+      "data-[state=closed]:data-[side=bottom]:slide-out-to-top-2",
+      "data-[state=closed]:data-[side=left]:slide-out-to-right-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  Tooltip,
+  TooltipPortal,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  TooltipArrow,
+};

package/src/{cva.ts → utils.ts}

@@ -1,7 +1,11 @@
 import { twMerge } from "tailwind-merge";
 import { defineConfig } from "cva";
 
-export const { cva, cx, compose } = defineConfig({
+export const {
+  cva,
+  cx: cn,
+  compose,
+} = defineConfig({
   hooks: {
     onComplete: (className) => twMerge(className),
   },

package/tailwind.config.ts

@@ -1,87 +1,29 @@
 import type { Config } from "tailwindcss";
 import { fontFamily } from "tailwindcss/defaultTheme";
+import tailwindcssAnimate from "tailwindcss-animate";
 import plugin from "tailwindcss/plugin";
 
 const config: Config = {
   content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
   darkMode: ["class"],
   plugins: [
-    plugin(({ addBase }) => {
-      addBase({
-        ":root": {
-          "--accent": "210 40% 96.1%", // slate.100
-          "--accent-foreground": "222.2 47.4% 11.2%", // slate.900
-          "--background": "0 0% 100%", // white
-          "--border": "214.3 31.8% 91.4%", // slate.200
-          "--card": "0 0% 100%", // white
-          "--card-foreground": "222.2 84% 4.9%", // slate.950
-          "--destructive": "0 84.2% 60.2%", // red.500
-          "--destructive-foreground": "210 40% 98%", // slate.50
-          "--foreground": "222.2 84% 4.9%", // slate.950
-          "--info": "",
-          "--info-foreground": "",
-          "--input": "214.3 31.8% 91.4%", // slate.200
-          "--muted": "210 40% 96.1%", // slate.100
-          "--muted-foreground": "215.4 16.3% 46.9%", // slate.500
-          "--popover": "0 0% 100%", // white
-          "--popover-foreground": "222.2 84% 4.9%", // slate.950
-          "--primary": "221.2 83.2% 53.3%", // blue.600
-          "--primary-foreground": "210 40% 98%", // slate.50
-          "--radius": "0.25rem",
-          "--ring": "221.2 83.2% 53.3%", // blue.600
-          "--secondary": "210 40% 96.1%", // slate.100
-          "--secondary-foreground": "222.2 47.4% 11.2%", // slate.900
-          "--success": "",
-          "--success-foreground": "",
-          "--warning": "",
-          "--warning-foreground": "",
-        },
-      });
-      addBase({
-        ".dark": {
-          "--accent": "217.2 32.6% 17.5%", // slate.800
-          "--accent-foreground": "210 40% 98%", // slate.50
-          "--background": "222.2 84% 4.9%", // slate.950
-          "--border": "217.2 32.6% 17.5%", // slate.800
-          "--card": "222.2 84% 4.9%", // slate.950
-          "--card-foreground": "210 40% 98%", // slate.50
-          "--destructive": "0 62.8% 30.6%", // red.900
-          "--destructive-foreground": "210 40% 98%", // slate.50
-          "--foreground": "210 40% 98%", // slate.50
-          "--info": "",
-          "--info-foreground": "",
-          "--input": "217.2 32.6% 17.5%", // slate.800
-          "--muted": "217.2 32.6% 17.5%", // slate.800
-          "--muted-foreground": "215 20.2% 65.1%", // slate.400
-          "--popover": "222.2 84% 4.9%", // slate.950
-          "--popover-foreground": "210 40% 98%", // slate.50
-          "--primary": "217.2 91.2% 59.8%", // blue.500
-          "--primary-foreground": "222.2 47.4% 11.2%", // slate.900
-          "--ring": "224.3 76.3% 48%", // blue.700
-          "--secondary": "217.2 32.6% 17.5%", // slate.800
-          "--secondary-foreground": "210 40% 98%", // slate.50
-          "--success": "",
-          "--success-foreground": "",
-          "--warning": "",
-          "--warning-foreground": "",
-        },
-      });
-      addBase({
-        ".dark": {
-          "color-scheme": "dark",
-        },
-      });
-      addBase({
-        body: {
-          "@apply bg-background text-foreground": {},
-        },
+    tailwindcssAnimate,
+    plugin(({ matchUtilities }) => {
+      matchUtilities({
+        perspective: (value) => ({
+          perspective: value,
+        }),
       });
     }),
   ],
   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: {
-        inherit: "inherit",
         sm: "calc(var(--radius, 0.25rem) - 0.125px)", // 2px
         DEFAULT: "var(--radius, 0.25rem)", // 4px
         md: "calc(var(--radius, 0.25rem) + 0.125rem)", // 6px
@@ -101,6 +43,7 @@ const config: Config = {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",
         },
+        compound: "hsl(var(--compound))",
         destructive: {
           DEFAULT: "hsl(var(--destructive))",
           foreground: "hsl(var(--destructive-foreground))",
@@ -140,6 +83,32 @@ const config: Config = {
       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",
+          },
+        },
+      },
     },
   },
 };

package/dist/chunk-33V4YP7I.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/cva.ts"],"names":["twMerge","defineConfig","cva","cx","compose","className"],"mappings":"AAAA,OAAS,WAAAA,MAAe,iBACxB,OAAS,gBAAAC,MAAoB,MAEtB,GAAM,CAAE,IAAAC,EAAK,GAAAC,EAAI,QAAAC,CAAQ,EAAIH,EAAa,CAC/C,MAAO,CACL,WAAaI,GAAcL,EAAQK,CAAS,CAC9C,CACF,CAAC","sourcesContent":["import { twMerge } from \"tailwind-merge\";\nimport { defineConfig } from \"cva\";\n\nexport const { cva, cx, compose } = defineConfig({\n  hooks: {\n    onComplete: (className) => twMerge(className),\n  },\n});\n"]}

package/dist/chunk-JVQ3OM5P.mjs

@@ -1,2 +0,0 @@
-import{twMerge as e}from"tailwind-merge";import{defineConfig as m}from"cva";var{cva:p,cx:c,compose:f}=m({hooks:{onComplete:o=>e(o)}});export{p as a,c as b,f as c};
-//# sourceMappingURL=chunk-JVQ3OM5P.mjs.map

package/dist/chunk-JVQ3OM5P.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/cva.ts"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\nimport { defineConfig } from \"cva\";\n\nexport const { cva, cx, compose } = defineConfig({\n  hooks: {\n    onComplete: (className) => twMerge(className),\n  },\n});\n"],"mappings":"AAAA,OAAS,WAAAA,MAAe,iBACxB,OAAS,gBAAAC,MAAoB,MAEtB,GAAM,CAAE,IAAAC,EAAK,GAAAC,EAAI,QAAAC,CAAQ,EAAIH,EAAa,CAC/C,MAAO,CACL,WAAaI,GAAcL,EAAQK,CAAS,CAC9C,CACF,CAAC","names":["twMerge","defineConfig","cva","cx","compose","className"]}

package/dist/code.d.mts

@@ -1,3 +0,0 @@
-declare function Code(props: React.HTMLAttributes<HTMLElement>): React.JSX.Element;
-
-export { Code };

package/dist/code.d.ts

@@ -1,3 +0,0 @@
-declare function Code(props: React.HTMLAttributes<HTMLElement>): React.JSX.Element;
-
-export { Code };

package/dist/code.js

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');function n(e){return _jsxruntime.jsx.call(void 0, "code",{...e})}exports.Code = n;
-//# sourceMappingURL=code.js.map

package/dist/code.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/code.tsx"],"names":["jsx","Code","props"],"mappings":"AAGS,cAAAA,MAAA,oBAHF,SAASC,EACdC,EACmB,CACnB,OAAOF,EAAC,QAAM,GAAGE,EAAO,CAC1B","sourcesContent":["export function Code(\n  props: React.HTMLAttributes<HTMLElement>,\n): React.JSX.Element {\n  return <code {...props} />;\n}\n"]}

package/dist/code.mjs

@@ -1,2 +0,0 @@
-import{jsx as t}from"react/jsx-runtime";function n(e){return t("code",{...e})}export{n as Code};
-//# sourceMappingURL=code.mjs.map

package/dist/code.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/code.tsx"],"sourcesContent":["export function Code(\n  props: React.HTMLAttributes<HTMLElement>,\n): React.JSX.Element {\n  return <code {...props} />;\n}\n"],"mappings":"AAGS,cAAAA,MAAA,oBAHF,SAASC,EACdC,EACmB,CACnB,OAAOF,EAAC,QAAM,GAAGE,EAAO,CAC1B","names":["jsx","Code","props"]}

package/dist/cva.js

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _chunk33V4YP7Ijs = require('./chunk-33V4YP7I.js');exports.compose = _chunk33V4YP7Ijs.c; exports.cva = _chunk33V4YP7Ijs.a; exports.cx = _chunk33V4YP7Ijs.b;
-//# sourceMappingURL=cva.js.map

package/dist/cva.mjs

@@ -1,2 +0,0 @@
-import{a,b,c}from"./chunk-JVQ3OM5P.mjs";export{c as compose,a as cva,b as cx};
-//# sourceMappingURL=cva.mjs.map

package/src/code.tsx

@@ -1,5 +0,0 @@
-export function Code(
-  props: React.HTMLAttributes<HTMLElement>,
-): React.JSX.Element {
-  return <code {...props} />;
-}