@codefast/ui 0.3.16-canary.3 → 0.4.0-canary.4

package/src/components/tooltip.tsx

@@ -1,9 +1,7 @@
-"use client";
-
+import { Tooltip as TooltipPrimitive } from "radix-ui";
 import type { ComponentProps, JSX } from "react";
 
 import { cn } from "#/lib/utils";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
 /* -----------------------------------------------------------------------------
  * Component: TooltipProvider
@@ -17,8 +15,8 @@ type TooltipProviderProps = ComponentProps<typeof TooltipPrimitive.Provider>;
 /**
  * @since 0.3.16-canary.0
  */
-function TooltipProvider({ ...props }: TooltipProviderProps): JSX.Element {
-  return <TooltipPrimitive.Provider data-slot="tooltip-provider" {...props} />;
+function TooltipProvider({ delayDuration = 0, ...props }: TooltipProviderProps): JSX.Element {
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -65,35 +63,14 @@ type TooltipContentProps = ComponentProps<typeof TooltipPrimitive.Content>;
 /**
  * @since 0.3.16-canary.0
  */
-function TooltipContent({
-  children,
-  className,
-  sideOffset = 4,
-  ...props
-}: TooltipContentProps): JSX.Element {
+function TooltipContent({ children, className, sideOffset = 0, ...props }: TooltipContentProps): JSX.Element {
   return (
-    <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Portal data-slot="tooltip-portal">
       <TooltipPrimitive.Content
         className={cn(
-          "z-50",
-          "w-fit max-w-(--radix-tooltip-content-available-width) px-3 py-1.5",
-          "rounded-md",
-          "bg-primary text-xs text-balance text-primary-foreground",
-          "ease-snappy data-[state=delayed-open]:animate-in data-[state=delayed-open]:duration-150 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-closed:animate-out data-closed:duration-100 data-closed:fade-out-0 data-closed:zoom-out-95",
-          "data-closed:data-side-top:slide-out-to-bottom-2",
-          "data-closed:data-side-right:slide-out-to-left-2",
-          "data-closed:data-side-bottom:slide-out-to-top-2",
-          "data-closed:data-side-left:slide-out-to-right-2",
-          "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0",
-          "origin-(--radix-tooltip-content-transform-origin)",
+          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background ease-snappy has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-open:animate-in data-open:animation-duration-menu-in data-open:fade-in-0 data-open:zoom-in-95 data-open:data-side-top:slide-in-from-bottom-2 data-open:data-side-right:slide-in-from-left-2 data-open:data-side-bottom:slide-in-from-top-2 data-open:data-side-left:slide-in-from-right-2 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-menu-out data-closed:fade-out-0 data-closed:zoom-out-95 data-closed:data-side-top:slide-out-to-bottom-2 data-closed:data-side-right:slide-out-to-left-2 data-closed:data-side-bottom:slide-out-to-top-2 data-closed:data-side-left:slide-out-to-right-2 data-delayed-open:animate-in data-delayed-open:animation-duration-menu-in data-delayed-open:fade-in-0 data-delayed-open:zoom-in-95 data-delayed-open:data-side-top:slide-in-from-bottom-2 data-delayed-open:data-side-right:slide-in-from-left-2 data-delayed-open:data-side-bottom:slide-in-from-top-2 data-delayed-open:data-side-left:slide-in-from-right-2",
           className,
         )}
-        collisionPadding={8}
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         {...props}
@@ -120,7 +97,10 @@ type TooltipArrowProps = ComponentProps<typeof TooltipPrimitive.Arrow>;
 function TooltipArrow({ className, ...props }: TooltipArrowProps): JSX.Element {
   return (
     <TooltipPrimitive.Arrow
-      className={cn("fill-primary", className)}
+      className={cn(
+        "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-xs bg-foreground fill-foreground",
+        className,
+      )}
       data-slot="tooltip-arrow"
       {...props}
     />
@@ -132,10 +112,4 @@ function TooltipArrow({ className, ...props }: TooltipArrowProps): JSX.Element {
  * -------------------------------------------------------------------------- */
 
 export { Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger };
-export type {
-  TooltipArrowProps,
-  TooltipContentProps,
-  TooltipProps,
-  TooltipProviderProps,
-  TooltipTriggerProps,
-};
+export type { TooltipArrowProps, TooltipContentProps, TooltipProps, TooltipProviderProps, TooltipTriggerProps };

package/src/css/foundation/base.css

@@ -0,0 +1,50 @@
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-border);
+    outline-color: --alpha(var(--color-ring) / 20%);
+  }
+
+  ::-webkit-scrollbar {
+    @apply size-2;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply rounded-full bg-border;
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-border) transparent;
+  }
+
+  html,
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+  }
+
+  input {
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-decoration {
+      appearance: none;
+    }
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    &[type="number"] {
+      -moz-appearance: textfield;
+    }
+  }
+}

package/src/css/foundation/motion.css

@@ -0,0 +1,36 @@
+@theme {
+  /* Enter curves — decelerate into place. */
+  --ease-ui: cubic-bezier(0.32, 0.72, 0, 1); /* large surfaces: dialog, sheet */
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful overshoot, opt-in */
+  --ease-snappy: cubic-bezier(0.23, 1, 0.32, 1); /* small popups: menu, tooltip */
+  --ease-gentle: cubic-bezier(0.4, 0, 0.2, 1); /* continuous layout shifts, fades */
+
+  /* Exit curve — accelerate away; pair with data-closed:. */
+  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
+
+  /*
+   * Semantic durations — enter/exit pairs per surface role.
+   * Exit ≈ 60% of enter to offset the slow start of the accelerating exit curve.
+   */
+  --animation-duration-menu-in: 150ms; /* menus, tooltip — instant tools */
+  --animation-duration-menu-out: 100ms;
+  --animation-duration-popup-in: 200ms; /* popover, hover card — content surfaces */
+  --animation-duration-popup-out: 120ms;
+  --animation-duration-overlay-in: 220ms; /* dialog content + backdrop */
+  --animation-duration-overlay-out: 150ms;
+  --animation-duration-panel-in: 320ms; /* sheet, drawer — large sliding panels */
+  --animation-duration-panel-out: 220ms;
+  --animation-duration-expand-in: 200ms; /* accordion, inline disclosure */
+  --animation-duration-expand-out: 150ms;
+
+  --animate-shimmer: shimmer 2.2s linear infinite;
+
+  @keyframes shimmer {
+    from {
+      background-position: 200% center;
+    }
+    to {
+      background-position: -200% center;
+    }
+  }
+}

package/src/css/foundation/source.css

@@ -0,0 +1,3 @@
+@import "tw-animate-css";
+
+@source "../../**/*.{ts,tsx}";

package/src/css/foundation/tokens.css

@@ -0,0 +1,71 @@
+:root {
+  --radius: 0.375rem;
+}
+
+@theme inline {
+  --font-sans: var(--font-sans);
+  --font-heading: var(--font-heading);
+  --font-mono: var(--font-mono);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-destructive: var(--destructive);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  --color-surface: var(--surface);
+  --color-surface-foreground: var(--surface-foreground);
+
+  --color-code: var(--code);
+  --color-code-foreground: var(--code-foreground);
+  --color-code-highlight: var(--code-highlight);
+  --color-code-number: var(--code-number);
+
+  --color-selection: var(--selection);
+  --color-selection-foreground: var(--selection-foreground);
+
+  --radius-xs: calc(var(--radius) * 2 / 6);
+  --radius-sm: calc(var(--radius) * 4 / 6);
+  --radius-md: var(--radius);
+  --radius-lg: calc(var(--radius) * 8 / 6);
+  --radius-xl: calc(var(--radius) * 12 / 6);
+  --radius-2xl: calc(var(--radius) * 16 / 6);
+  --radius-3xl: calc(var(--radius) * 24 / 6);
+  --radius-4xl: calc(var(--radius) * 32 / 6);
+}

package/src/css/foundation/variants.css

@@ -0,0 +1,113 @@
+/*
+ * Custom Tailwind variants for @codefast/ui.
+ *
+ * Shorthand usage (composes with group-, peer-, in-, has- modifiers):
+ *   data-open:           → [data-state="open"] or [data-open]:not([data-open="false"])
+ *   group-data-disabled: → ancestor .group with matching data-disabled
+ *   in-data-side-left:   → ancestor with [data-side="left"]
+ *
+ * Prefer these over verbose arbitrary variants (data-[state=open]:, data-[side=left]:).
+ */
+
+/* -------------------------------------------------------------------------
+ * Theme
+ * ------------------------------------------------------------------------- */
+
+@custom-variant dark {
+  &:where(.dark, .dark *) {
+    @slot;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    &:where(:not(.light, .light *)) {
+      @slot;
+    }
+  }
+}
+
+/* -------------------------------------------------------------------------
+ * Layout — orientation & placement (Radix Popper)
+ * ------------------------------------------------------------------------- */
+
+@custom-variant data-horizontal (&:where([data-orientation="horizontal"]));
+@custom-variant data-vertical (&:where([data-orientation="vertical"]));
+
+@custom-variant data-side-top (&:where([data-side="top"]));
+@custom-variant data-side-right (&:where([data-side="right"]));
+@custom-variant data-side-bottom (&:where([data-side="bottom"]));
+@custom-variant data-side-left (&:where([data-side="left"]));
+
+/* -------------------------------------------------------------------------
+ * State — boolean & Radix data-state
+ *
+ * Block variants match both Radix data-state="…" and boolean data-* attrs
+ * so components can use one shorthand regardless of attribute source.
+ * ------------------------------------------------------------------------- */
+
+/* Matches Radix data-state="open" and boolean data-open (not "false"). */
+@custom-variant data-open {
+  &:where([data-state="open"]),
+  &:where([data-open]:not([data-open="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-closed {
+  &:where([data-state="closed"]),
+  &:where([data-closed]:not([data-closed="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-checked {
+  &:where([data-state="checked"]),
+  &:where([data-checked]:not([data-checked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-unchecked {
+  &:where([data-state="unchecked"]),
+  &:where([data-unchecked]:not([data-unchecked="false"])) {
+    @slot;
+  }
+}
+
+/* data-selected only matches explicit true, not bare data-selected. */
+@custom-variant data-selected {
+  &:where([data-state="selected"]),
+  &:where([data-selected="true"]) {
+    @slot;
+  }
+}
+
+@custom-variant data-active {
+  &:where([data-state="active"]),
+  &:where([data-active]:not([data-active="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-disabled {
+  &:where([data-disabled="true"]),
+  &:where([data-disabled]:not([data-disabled="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-focused {
+  &:where([data-focused="true"]),
+  &:where([data-focused]:not([data-focused="false"])) {
+    @slot;
+  }
+}
+
+/* -------------------------------------------------------------------------
+ * State — Radix-only (no boolean data-* equivalent)
+ * ------------------------------------------------------------------------- */
+
+@custom-variant data-on (&:where([data-state="on"]));
+@custom-variant data-collapsed (&:where([data-state="collapsed"]));
+@custom-variant data-hidden (&:where([data-state="hidden"]));
+@custom-variant data-visible (&:where([data-state="visible"]));
+@custom-variant data-delayed-open (&:where([data-state="delayed-open"]));

package/src/css/preset.css

@@ -1,214 +1,5 @@
-@import "tw-animate-css";
-
-@source "../../dist/**/*.{js,mjs}";
-
-@custom-variant dark {
-  &:where(.dark, .dark *) {
-    @slot;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    &:where(:not(.light, .light *)) {
-      @slot;
-    }
-  }
-}
-
-@custom-variant data-horizontal (&:where([data-orientation="horizontal"]));
-@custom-variant data-vertical (&:where([data-orientation="vertical"]));
-
-@custom-variant data-side-top (&:where([data-side="top"]));
-@custom-variant data-side-right (&:where([data-side="right"]));
-@custom-variant data-side-bottom (&:where([data-side="bottom"]));
-@custom-variant data-side-left (&:where([data-side="left"]));
-
-@custom-variant data-open {
-  &:where([data-state="open"]),
-  &:where([data-open]:not([data-open="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-closed {
-  &:where([data-state="closed"]),
-  &:where([data-closed]:not([data-closed="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-checked {
-  &:where([data-state="checked"]),
-  &:where([data-checked]:not([data-checked="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-unchecked {
-  &:where([data-state="unchecked"]),
-  &:where([data-unchecked]:not([data-unchecked="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-selected {
-  &:where([data-state="selected"]),
-  &:where([data-selected="true"]) {
-    @slot;
-  }
-}
-
-@custom-variant data-active {
-  &:where([data-state="active"]),
-  &:where([data-active]:not([data-active="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-disabled {
-  &:where([data-disabled="true"]),
-  &:where([data-disabled]:not([data-disabled="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-focused {
-  &:where([data-focused="true"]),
-  &:where([data-focused]:not([data-focused="false"])) {
-    @slot;
-  }
-}
-
-@utility no-scrollbar {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-:root {
-  --radius: 0.375rem;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-
-  --color-destructive: var(--destructive);
-
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-
-  --radius-xs: calc(var(--radius) * 2 / 6);
-  --radius-sm: calc(var(--radius) * 4 / 6);
-  --radius-md: var(--radius);
-  --radius-lg: calc(var(--radius) * 8 / 6);
-  --radius-xl: calc(var(--radius) * 12 / 6);
-  --radius-2xl: calc(var(--radius) * 16 / 6);
-  --radius-3xl: calc(var(--radius) * 24 / 6);
-  --radius-4xl: calc(var(--radius) * 32 / 6);
-}
-
-@theme {
-  --ease-ui: cubic-bezier(0.32, 0.72, 0, 1);
-  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-  --ease-snappy: cubic-bezier(0.23, 1, 0.32, 1);
-  --ease-gentle: cubic-bezier(0.4, 0, 0.2, 1);
-
-  --animate-shimmer: shimmer 2.2s linear infinite;
-
-  @keyframes shimmer {
-    from {
-      background-position: 200% center;
-    }
-    to {
-      background-position: -200% center;
-    }
-  }
-}
-
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-border);
-    outline-color: --alpha(var(--color-ring) / 20%);
-  }
-
-  ::-webkit-scrollbar {
-    @apply size-2;
-  }
-
-  ::-webkit-scrollbar-track {
-    @apply bg-transparent;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    @apply rounded-full bg-border;
-  }
-
-  * {
-    scrollbar-width: thin;
-    scrollbar-color: var(--color-border) transparent;
-  }
-
-  html,
-  body {
-    background-color: var(--color-background);
-    color: var(--color-foreground);
-  }
-
-  input {
-    &::-webkit-search-cancel-button,
-    &::-webkit-search-decoration {
-      appearance: none;
-    }
-
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-
-    &[type="number"] {
-      -moz-appearance: textfield;
-    }
-  }
-}
+@import "./foundation/source.css";
+@import "./foundation/variants.css";
+@import "./foundation/tokens.css";
+@import "./foundation/motion.css";
+@import "./foundation/base.css";

package/src/css/style.css

@@ -1,3 +1,3 @@
 @import "tailwindcss";
-@import "./neutral.css";
+@import "./themes/neutral.css";
 @import "./preset.css";

package/src/hooks/use-animated-value.ts

@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect, useRef, useState } from "react";
 
 /**
@@ -21,11 +19,7 @@ import { useEffect, useRef, useState } from "react";
  *
  * @since 0.3.16-canary.0
  */
-export function useAnimatedValue(
-  targetValue: null | number,
-  duration: number,
-  animate?: boolean,
-): number {
+export function useAnimatedValue(targetValue: null | number, duration: number, animate?: boolean): number {
   // Default to 0 when targetValue is null
   const actualTargetValue = targetValue ?? 0;
 

package/src/hooks/use-copy-to-clipboard.ts

@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 
 /**
@@ -21,10 +19,7 @@ import { useState } from "react";
  *
  * @since 0.3.16-canary.0
  */
-export function useCopyToClipboard({
-  onCopy,
-  timeout = 2000,
-}: { onCopy?: () => void; timeout?: number } = {}): {
+export function useCopyToClipboard({ onCopy, timeout = 2000 }: { onCopy?: () => void; timeout?: number } = {}): {
   copyToClipboard: (value: string) => Promise<void>;
   isCopied: boolean;
 } {

package/src/hooks/use-is-mobile.ts

@@ -1,5 +1,3 @@
-"use client";
-
 import { useMediaQuery } from "#/hooks/use-media-query";
 
 /**

package/src/hooks/use-media-query.ts

@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect, useState } from "react";
 
 /**

package/src/hooks/use-mutation-observer.ts

@@ -1,7 +1,4 @@
-"use client";
-
 import type { RefObject } from "react";
-
 import { useEffect } from "react";
 
 /**

package/src/hooks/use-pagination.ts

@@ -1,5 +1,3 @@
-"use client";
-
 import { useMemo } from "react";
 
 /**