@smicolon/fasla-ui 0.2.4 → 0.4.0

package/registry/blocks/sidebar/Sidebar.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import { ChevronsLeftIcon } from "lucide-react"
 import { cn } from "../../../src/lib/utils"
 
 export interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
@@ -19,6 +20,11 @@ const widthClasses = {
   lg: "w-72",
 }
 
+/** The enclosing Sidebar's onCollapsedChange, for SidebarCollapseButton. */
+const SidebarCollapsedChangeContext = React.createContext<
+  ((collapsed: boolean) => void) | undefined
+>(undefined)
+
 export function Sidebar({
   collapsed = false,
   onCollapsedChange,
@@ -28,16 +34,18 @@ export function Sidebar({
   ...props
 }: SidebarProps) {
   return (
-    <aside
-      className={cn(
-        "flex h-full flex-col border-r bg-background transition-all duration-200",
-        collapsed ? "w-16" : widthClasses[width],
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </aside>
+    <SidebarCollapsedChangeContext.Provider value={onCollapsedChange}>
+      <aside
+        className={cn(
+          "flex h-full flex-col border-e bg-background transition-all duration-200",
+          collapsed ? "w-16" : widthClasses[width],
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </aside>
+    </SidebarCollapsedChangeContext.Provider>
   )
 }
 
@@ -116,7 +124,7 @@ export function SidebarGroup({
   return (
     <div className={cn("py-2", className)} {...props}>
       {label && (
-        <div className="mb-2 px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+        <div className="mb-2 px-2 text-xs font-semibold uppercase text-muted-foreground">
           {label}
         </div>
       )}
@@ -173,9 +181,19 @@ export function SidebarCollapseButton({
   className,
   ...props
 }: SidebarCollapseButtonProps) {
+  const onSidebarCollapsedChange = React.useContext(SidebarCollapsedChangeContext)
+
+  // Tells the enclosing Sidebar too, once if both were given the same handler
+  const toggle = () => {
+    onCollapsedChange(!collapsed)
+    if (onSidebarCollapsedChange && onSidebarCollapsedChange !== onCollapsedChange) {
+      onSidebarCollapsedChange(!collapsed)
+    }
+  }
+
   return (
     <button
-      onClick={() => onCollapsedChange(!collapsed)}
+      onClick={toggle}
       className={cn(
         "flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent",
         className
@@ -183,20 +201,12 @@ export function SidebarCollapseButton({
       aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
       {...props}
     >
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        className={cn("transition-transform", collapsed && "rotate-180")}
-      >
-        <polyline points="11 17 6 12 11 7" />
-        <polyline points="18 17 13 12 18 7" />
-      </svg>
+      {/* Points at the edge the sidebar collapses toward, so it mirrors in RTL. */}
+      <ChevronsLeftIcon
+        size={16}
+        strokeWidth={1.5}
+        className={cn("transition-transform motion-reduce:transition-none rtl:-scale-x-100", collapsed && "rotate-180")}
+      />
     </button>
   )
 }

package/registry/blocks/stats-card/StatsCard.tsx

@@ -1,4 +1,5 @@
 import * as React from "react"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 import { cn } from "../../../src/lib/utils"
 
 export interface StatsCardProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -43,7 +44,7 @@ export function StatsCard({
           {loading ? (
             <div className="h-8 w-24 animate-pulse rounded bg-muted" />
           ) : (
-            <p className="text-2xl font-bold tracking-tight">{value}</p>
+            <p className="text-2xl font-bold">{value}</p>
           )}
         </div>
         {icon && (
@@ -59,41 +60,23 @@ export function StatsCard({
             <span
               className={cn(
                 "inline-flex items-center gap-1 font-medium",
-                trend.direction === "up" && "text-green-600 dark:text-green-400",
-                trend.direction === "down" && "text-red-600 dark:text-red-400",
+                // The tokens already change with the mode, so no dark: variants.
+                trend.direction === "up" && "text-success",
+                trend.direction === "down" && "text-destructive",
                 trend.direction === "neutral" && "text-muted-foreground"
               )}
             >
               {trend.direction === "up" && (
-                <svg
-                  width="16"
-                  height="16"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <polyline points="18 15 12 9 6 15" />
-                </svg>
+                <ChevronUpIcon size={16} strokeWidth={1.5} />
               )}
               {trend.direction === "down" && (
-                <svg
-                  width="16"
-                  height="16"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <polyline points="6 9 12 15 18 9" />
-                </svg>
+                <ChevronDownIcon size={16} strokeWidth={1.5} />
               )}
-              {trend.value > 0 ? "+" : ""}
-              {trend.value}%
+              {/* One LTR unit: in RTL the sign would otherwise jump to the far end, "12.5%+". */}
+              <bdi dir="ltr">
+                {trend.value > 0 ? "+" : ""}
+                {trend.value}%
+              </bdi>
             </span>
           )}
           {description && (

package/registry/effects/animated-gradient/animated-gradient.tsx

@@ -4,6 +4,20 @@ import * as React from "react"
 import { motion, useReducedMotion } from "framer-motion"
 import { cn } from "../../../src/lib/utils"
 
+/**
+ * The colours, without blank entries (a cleared control, say); the fallback
+ * when none are left, since an empty list would draw nothing.
+ */
+const filledList = (colors: string[] | undefined, fallback: string[]) => {
+  const usable = (colors ?? []).filter((color) => typeof color === "string" && color.trim())
+  return usable.length ? usable : fallback
+}
+
+// Theme tokens only, so the gradient follows the project's palette and mode.
+const GRADIENT_COLORS = ["var(--primary)", "var(--secondary)", "var(--chart-5)", "var(--info)"]
+
+const TEXT_COLORS = ["var(--primary)", "var(--chart-5)", "var(--primary)"]
+
 export interface AnimatedGradientProps
   extends React.HTMLAttributes<HTMLDivElement> {
   /** Gradient colors */
@@ -28,12 +42,7 @@ const blurValues = {
  * Respects prefers-reduced-motion by stopping animation.
  */
 export function AnimatedGradient({
-  colors = [
-    "hsl(var(--primary))",
-    "hsl(var(--secondary))",
-    "hsl(280 100% 70%)",
-    "hsl(200 100% 70%)",
-  ],
+  colors: colorsProp,
   speed = 10,
   blur = "3xl",
   className,
@@ -41,10 +50,11 @@ export function AnimatedGradient({
   ...props
 }: AnimatedGradientProps) {
   const prefersReducedMotion = useReducedMotion()
+  const colors = filledList(colorsProp, GRADIENT_COLORS)
 
   return (
     <div
-      className={cn("relative overflow-hidden", className)}
+      className={cn("relative isolate overflow-hidden", className)}
       {...props}
     >
       {/* Gradient blobs */}
@@ -100,12 +110,13 @@ export interface AnimatedGradientTextProps {
 }
 
 export function AnimatedGradientText({
-  colors = ["hsl(var(--primary))", "hsl(280 100% 70%)", "hsl(var(--primary))"],
+  colors: colorsProp,
   speed = 3,
   className,
   children,
 }: AnimatedGradientTextProps) {
   const prefersReducedMotion = useReducedMotion()
+  const colors = filledList(colorsProp, TEXT_COLORS)
 
   return (
     <motion.span

package/registry/effects/border-beam/border-beam.tsx

@@ -1,9 +1,13 @@
 "use client"
 
 import * as React from "react"
-import { motion, useReducedMotion } from "framer-motion"
+import { animate, motion, useMotionValue, useReducedMotion, useTransform } from "framer-motion"
 import { cn } from "../../../src/lib/utils"
 
+/** The value, or the fallback when it is missing or blank (a cleared control, say). */
+const filled = (value: string | undefined, fallback: string) =>
+  value && value.trim() ? value : fallback
+
 export interface BorderBeamProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Duration of the animation in seconds */
   duration?: number
@@ -24,62 +28,68 @@ export interface BorderBeamProps extends React.HTMLAttributes<HTMLDivElement> {
 export function BorderBeam({
   duration = 4,
   borderWidth = 2,
-  colorFrom = "hsl(var(--primary))",
-  colorTo = "transparent",
+  colorFrom: colorFromProp,
+  colorTo: colorToProp,
   delay = 0,
   className,
   children,
   ...props
 }: BorderBeamProps) {
+  const colorFrom = filled(colorFromProp, "var(--primary)")
+  const colorTo = filled(colorToProp, "transparent")
   const prefersReducedMotion = useReducedMotion()
 
+  // The beam is a conic gradient whose start angle turns, so it runs round
+  // the border of any shape; rotating a layer only works for a square.
+  const angle = useMotionValue(0)
+  React.useEffect(() => {
+    if (prefersReducedMotion) return
+    const controls = animate(angle, 360, {
+      duration,
+      delay,
+      ease: "linear",
+      repeat: Infinity,
+    })
+    return () => controls.stop()
+  }, [angle, duration, delay, prefersReducedMotion])
+  const background = useTransform(
+    angle,
+    (a) => `conic-gradient(from ${a}deg, transparent 0deg 270deg, ${colorTo} 270deg, ${colorFrom} 360deg)`
+  )
+
+  /** Paints only a borderWidth ring: the content box is masked out. */
+  const ring: React.CSSProperties = {
+    padding: borderWidth,
+    mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+    maskComposite: "exclude",
+    WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+    WebkitMaskComposite: "xor",
+  }
+
   return (
     <div
-      className={cn("relative overflow-hidden rounded-lg", className)}
+      className={cn("relative isolate overflow-hidden rounded-lg", className)}
       {...props}
     >
-      {/* Border beam */}
-      {!prefersReducedMotion && (
-        <motion.div
-          className="pointer-events-none absolute inset-0 rounded-[inherit]"
-          style={{
-            padding: borderWidth,
-            background: `linear-gradient(90deg, ${colorFrom}, ${colorTo})`,
-            mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
-            maskComposite: "exclude",
-            WebkitMaskComposite: "xor",
-          }}
-          animate={{
-            rotate: [0, 360],
-          }}
-          transition={{
-            duration,
-            delay,
-            repeat: Infinity,
-            ease: "linear",
-          }}
-        />
-      )}
+      {/* Content */}
+      <div className="relative rounded-[inherit] bg-background">
+        {children}
+      </div>
 
-      {/* Static border fallback for reduced motion */}
-      {prefersReducedMotion && (
+      {/* The ring sits above the content, over its outer edge, so the content cannot cover it */}
+      {prefersReducedMotion ? (
         <div
-          className="pointer-events-none absolute inset-0 rounded-[inherit]"
-          style={{
-            padding: borderWidth,
-            background: colorFrom,
-            mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
-            maskComposite: "exclude",
-            WebkitMaskComposite: "xor",
-            opacity: 0.5,
-          }}
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 z-10 rounded-[inherit]"
+          style={{ ...ring, background: colorFrom, opacity: 0.5 }}
+        />
+      ) : (
+        <motion.div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 z-10 rounded-[inherit]"
+          style={{ ...ring, background }}
         />
       )}
-
-      {/* Content */}
-      <div className="relative z-10 rounded-[inherit] bg-background">
-        {children}
-      </div>
     </div>
   )
 }
@@ -93,40 +103,54 @@ export interface GlowingBorderProps extends React.HTMLAttributes<HTMLDivElement>
   intensity?: "sm" | "md" | "lg"
 }
 
+/**
+ * The ring's width and the blur of the glow that hugs it, in px. The glow has
+ * no spread, so it stays close to the edge instead of casting a shadow.
+ */
 const intensityValues = {
-  sm: "0 0 10px 2px",
-  md: "0 0 20px 4px",
-  lg: "0 0 30px 6px",
+  sm: { ring: 1, glow: 4 },
+  md: { ring: 1, glow: 8 },
+  lg: { ring: 2, glow: 12 },
 }
 
 /**
- * Static glowing border effect.
+ * Static glowing border: a coloured ring on the element's edge with a soft,
+ * tight glow around it. The ring is the border, so the content needs none.
  */
 export function GlowingBorder({
-  glowColor = "hsl(var(--primary) / 0.5)",
-  borderRadius = "0.5rem",
+  glowColor: glowColorProp,
+  borderRadius: borderRadiusProp,
   intensity = "md",
   className,
   children,
   ...props
 }: GlowingBorderProps) {
+  const glowColor = filled(glowColorProp, "color-mix(in oklch, var(--primary) 50%, transparent)")
+  const borderRadius = filled(borderRadiusProp, "0.5rem")
+  const { ring, glow } = intensityValues[intensity]
   return (
     <div
-      className={cn("relative", className)}
+      className={cn("relative isolate", className)}
       style={{
         borderRadius,
       }}
       {...props}
     >
-      {/* Glow */}
+      {children}
+      {/*
+        Above the content, so a card's own background cannot cover it. The inset
+        shadow draws the ring just inside the edge, over any neutral border the
+        content has; the outer ones are the glow.
+      */}
       <div
-        className="absolute inset-0 -z-10"
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 z-10"
         style={{
           borderRadius,
-          boxShadow: `${intensityValues[intensity]} ${glowColor}`,
+          // Two stacked blurs, no spread: a denser glow at the edge that fades fast.
+          boxShadow: `inset 0 0 0 ${ring}px ${glowColor}, 0 0 ${glow / 2}px 0 ${glowColor}, 0 0 ${glow}px 0 ${glowColor}`,
         }}
       />
-      {children}
     </div>
   )
 }