@payglocal_ui/flux-ui 0.3.4 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payglocal_ui/flux-ui",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "Flux UI primitives — inputs, fields, dialog, data table, charts, calendar, and more (Tailwind v4 + Radix).",
   "license": "MIT",
   "type": "module",

package/src/alert.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { X, Info, CheckCircle2, AlertTriangle, XCircle } from "lucide-react";
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 
 export type AlertVariant = "info" | "success" | "warning" | "error" | "neutral";
 
@@ -35,7 +36,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
       <div
         ref={ref}
         role="alert"
-        className={cn("relative flex gap-3 rounded-xl border p-4 shadow-sm", variantStyles[variant], className)}
+        className={cn("relative flex gap-3 rounded-xl border p-4", elevation.surface, variantStyles[variant], className)}
         {...props}
       >
         <Icon className="mt-0.5 size-4 shrink-0" aria-hidden />

package/src/button-group.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 import { ChevronDown } from "lucide-react";
 import {
   forwardRef,
@@ -144,15 +145,15 @@ export const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(
             "disabled:cursor-not-allowed disabled:opacity-50",
             // Match variant styling
             variant === "primary" &&
-              "bg-primary text-primary-foreground border border-primary shadow-sm hover:bg-[var(--primary-hover)] border-l border-l-primary-foreground/20",
+              `bg-primary text-primary-foreground border border-primary ${elevation.control} hover:bg-[var(--primary-hover)] border-l border-l-primary-foreground/20`,
             variant === "secondary" &&
-              "bg-muted text-foreground border border-border shadow-sm hover:bg-muted/85 dark:bg-muted/35 dark:hover:bg-muted/55 border-l-0",
+              `bg-muted text-foreground border border-border ${elevation.control} hover:bg-muted/85 dark:bg-muted/35 dark:hover:bg-muted/55 border-l-0`,
             variant === "outline" &&
-              "bg-card text-foreground border border-border shadow-sm hover:bg-muted border-l-0",
+              `bg-card text-foreground border border-border ${elevation.control} hover:bg-muted border-l-0`,
             variant === "ghost" &&
               "bg-transparent text-foreground border border-transparent hover:bg-muted border-l-0",
             variant === "danger" &&
-              "bg-red-600 text-white border border-red-600 shadow-sm hover:bg-red-700 border-l border-l-white/20",
+              `bg-red-600 text-white border border-red-600 ${elevation.control} hover:bg-red-700 border-l border-l-white/20`,
             // Size heights to match Button
             size === "sm" && "h-9 min-h-9 rounded-lg",
             size === "md" && "h-10 min-h-10 rounded-lg",
@@ -174,7 +175,8 @@ export const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(
             role="menu"
             className={cn(
               "absolute right-0 top-full mt-1 z-50",
-              "bg-card border border-border rounded-lg shadow-lg py-1 min-w-32"
+              "bg-card border border-border rounded-lg py-1 min-w-32",
+              elevation.popover
             )}
           >
             {children}

package/src/button.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 import { Loader2 } from "lucide-react";
 import { type ButtonHTMLAttributes, forwardRef } from "react";
 
@@ -14,15 +15,15 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
 const variantClasses: Record<NonNullable<ButtonProps["variant"]>, string> = {
   primary:
-    "bg-primary text-primary-foreground border border-primary shadow-sm hover:bg-[var(--primary-hover)]",
+    `bg-primary text-primary-foreground border border-primary ${elevation.control} hover:bg-[var(--primary-hover)]`,
   secondary:
-    "bg-muted text-foreground border border-border shadow-sm hover:bg-muted/85 dark:bg-muted/35 dark:text-foreground dark:border-border dark:hover:bg-muted/55",
+    `bg-muted text-foreground border border-border ${elevation.control} hover:bg-muted/85 dark:bg-muted/35 dark:text-foreground dark:border-border dark:hover:bg-muted/55`,
   ghost:
     "bg-transparent text-foreground border border-transparent hover:bg-muted focus-visible:bg-muted/80 active:bg-muted/90",
   danger:
-    "bg-red-600 text-white border border-red-600 shadow-sm hover:bg-red-700",
+    `bg-red-600 text-white border border-red-600 ${elevation.control} hover:bg-red-700`,
   outline:
-    "bg-card text-foreground border border-border shadow-sm hover:bg-muted",
+    `bg-card text-foreground border border-border ${elevation.control} hover:bg-muted`,
   link:
     "h-auto min-h-0 rounded-md border border-transparent bg-transparent px-2 py-2 text-[15px] font-medium text-primary shadow-none underline-offset-4 hover:bg-primary/5 hover:underline focus-visible:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35 disabled:pointer-events-none disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:no-underline",
 };

package/src/calendar.tsx

@@ -12,6 +12,7 @@ import {
 import { Button } from "./button";
 import type { ButtonProps } from "./button";
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 
 const cellSize = "[--cell-size:2rem]";
 
@@ -22,7 +23,8 @@ function navButtonClasses(variant: NonNullable<ButtonProps["variant"]>): string
     case "outline":
       return cn(
         base,
-        "border-border bg-card text-foreground shadow-sm hover:bg-muted"
+        elevation.control,
+        "border-border bg-card text-foreground hover:bg-muted"
       );
     case "ghost":
     default:
@@ -100,7 +102,8 @@ function Calendar({
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
-          "relative rounded-md border border-border bg-card shadow-sm focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/35",
+          "relative rounded-md border border-border bg-card focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/35",
+          elevation.field,
           defaultClassNames.dropdown_root
         ),
         dropdown: cn("absolute inset-0 cursor-pointer opacity-0", defaultClassNames.dropdown),

package/src/card.tsx

@@ -2,8 +2,11 @@ import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 
-const cardVariants = cva("flex flex-col rounded-xl border border-border bg-card text-card-foreground shadow-sm", {
+const cardVariants = cva(
+  cn("flex flex-col rounded-xl border border-border bg-card text-card-foreground", elevation.surface),
+  {
   variants: {
     size: {
       default: "gap-10 px-10 py-10",

package/src/chart-templates.tsx

@@ -21,6 +21,7 @@ import {
   Minus,
 } from "lucide-react";
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 import { Button } from "./button";
 import { Separator } from "./separator";
 
@@ -70,7 +71,8 @@ export function MetricSparklineCard({
   return (
     <div
       className={cn(
-        "relative overflow-hidden rounded-xl border border-border bg-card p-5 text-card-foreground shadow-sm",
+        "relative overflow-hidden rounded-xl border border-border bg-card p-5 text-card-foreground",
+        elevation.surface,
         className
       )}
     >
@@ -167,7 +169,7 @@ export function DashboardAreaChartTemplate({
   const areaGid = React.useId().replace(/:/g, "");
 
   return (
-    <div className={cn("rounded-xl border border-border bg-card text-card-foreground shadow-sm", className)}>
+    <div className={cn("rounded-xl border border-border bg-card text-card-foreground", elevation.surface, className)}>
       <div className="flex flex-col gap-4 border-b border-border px-5 pt-4 pb-3 sm:flex-row sm:items-start sm:justify-between">
         <h3 className="text-sm font-semibold text-foreground">{title}</h3>
         <div className="flex flex-wrap gap-1 rounded-lg border border-border bg-muted/30 p-0.5">
@@ -285,7 +287,7 @@ export function GroupedBarChartTemplate({
   className,
 }: GroupedBarChartTemplateProps) {
   return (
-    <div className={cn("rounded-xl border border-border bg-card px-5 pt-4 pb-3 text-card-foreground shadow-sm", className)}>
+    <div className={cn("rounded-xl border border-border bg-card px-5 pt-4 pb-3 text-card-foreground", elevation.surface, className)}>
       <div className="mb-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h3 className="text-sm font-semibold text-foreground">{title}</h3>
@@ -362,7 +364,7 @@ export function RankedBarListTemplate({
   className,
 }: RankedBarListTemplateProps) {
   return (
-    <div className={cn("rounded-xl border border-border bg-card p-5 text-card-foreground shadow-sm", className)}>
+    <div className={cn("rounded-xl border border-border bg-card p-5 text-card-foreground", elevation.surface, className)}>
       <div className="mb-4 flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
         <div>
           <h3 className="text-sm font-semibold text-foreground">{title}</h3>
@@ -422,7 +424,7 @@ export function CategoryBarChartTemplate({
   const chartData = data.map((d) => ({ name: d.category, v: d.value }));
 
   return (
-    <div className={cn("rounded-xl border border-border bg-card px-5 pt-4 pb-3 text-card-foreground shadow-sm", className)}>
+    <div className={cn("rounded-xl border border-border bg-card px-5 pt-4 pb-3 text-card-foreground", elevation.surface, className)}>
       <div className="mb-3">
         <h3 className="text-sm font-semibold text-foreground">{title}</h3>
         {subtitle ? <p className="mt-0.5 text-xs text-muted-foreground">{subtitle}</p> : null}
@@ -486,7 +488,7 @@ export function MiniSparklineChartCard({
   const hasCompare = data.some((d) => d.compare != null);
 
   return (
-    <div className={cn("rounded-xl border border-border bg-card p-5 text-card-foreground shadow-sm", className)}>
+    <div className={cn("rounded-xl border border-border bg-card p-5 text-card-foreground", elevation.surface, className)}>
       <h3 className="text-sm font-semibold text-foreground">{title}</h3>
       <div className="mt-2 text-2xl font-semibold tabular-nums">{value}</div>
       <div className="mt-2" style={{ height }}>
@@ -554,7 +556,7 @@ const toneCls = {
 
 export function AttentionListTemplate({ title, items, className }: AttentionListTemplateProps) {
   return (
-    <div className={cn("rounded-xl border border-border bg-card p-5 text-card-foreground shadow-sm", className)}>
+    <div className={cn("rounded-xl border border-border bg-card p-5 text-card-foreground", elevation.surface, className)}>
       <h3 className="text-sm font-semibold text-foreground">{title}</h3>
       <ul className="mt-4 space-y-4">
         {items.map((item) => (

package/src/checkbox-select.tsx

@@ -5,6 +5,7 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check, ChevronDown, Search } from "lucide-react";
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 import { filterOptions, type OptionFilter } from "./option-filter";
 import { ScrollLockTakeover } from "./scroll-lock";
 
@@ -114,7 +115,8 @@ const CheckboxSelect = React.forwardRef<HTMLButtonElement, CheckboxSelectProps>(
             aria-expanded={open}
             aria-haspopup="listbox"
             className={cn(
-              "flex h-11 w-full items-center justify-between gap-2.5 rounded-lg border border-border bg-card px-4 py-2 text-[15px] shadow-sm outline-none",
+              "flex h-11 w-full items-center justify-between gap-2.5 rounded-lg border border-border bg-card px-4 py-2 text-[15px] outline-none",
+              elevation.field,
               "transition-colors duration-pg-fast ease-pg-standard",
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35",
               "disabled:cursor-not-allowed disabled:opacity-50",
@@ -141,7 +143,8 @@ const CheckboxSelect = React.forwardRef<HTMLButtonElement, CheckboxSelectProps>(
               sideOffset={6}
               collisionPadding={8}
               className={cn(
-                "z-[120] min-w-[var(--radix-popover-trigger-width)] w-full rounded-xl border border-border bg-popover text-popover-foreground shadow-lg outline-none p-1",
+                "z-[120] min-w-[var(--radix-popover-trigger-width)] w-full rounded-xl border border-border bg-popover text-popover-foreground outline-none p-1",
+                elevation.popover,
                 "data-[state=open]:opacity-100 data-[state=closed]:opacity-0 transition-opacity duration-150"
               )}
             >
@@ -155,7 +158,8 @@ const CheckboxSelect = React.forwardRef<HTMLButtonElement, CheckboxSelectProps>(
                     placeholder={searchPlaceholder}
                     aria-label={searchPlaceholder}
                     className={cn(
-                      "flex h-9 w-full rounded-md border border-border bg-card pl-8 pr-3 text-sm shadow-sm placeholder:text-muted-foreground",
+                      "flex h-9 w-full rounded-md border border-border bg-card pl-8 pr-3 text-sm placeholder:text-muted-foreground",
+                      elevation.field,
                       "transition-colors duration-pg-fast ease-pg-standard",
                       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35"
                     )}
@@ -222,7 +226,8 @@ const CheckboxSelect = React.forwardRef<HTMLButtonElement, CheckboxSelectProps>(
                           onCheckedChange={() => !option.disabled && handleToggle(option.value)}
                           onClick={(e) => e.stopPropagation()}
                           className={cn(
-                            "peer h-4 w-4 shrink-0 rounded-md border border-border bg-card shadow-sm",
+                            "peer h-4 w-4 shrink-0 rounded-md border border-border bg-card",
+                            elevation.field,
                             "transition-colors duration-pg-fast ease-pg-standard",
                             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35",
                             "disabled:cursor-not-allowed disabled:opacity-50",

package/src/checkbox.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check, Minus } from "lucide-react";
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 
 export type CheckboxSize = "sm" | "md" | "lg";
 
@@ -30,7 +31,8 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer shrink-0 border border-border bg-card shadow-sm transition-colors duration-pg-fast ease-pg-standard",
+      "peer shrink-0 border border-border bg-card transition-colors duration-pg-fast ease-pg-standard",
+      elevation.field,
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35",
       "disabled:cursor-not-allowed disabled:opacity-50",
       "data-[state=checked]:bg-primary data-[state=checked]:border-primary",

package/src/command.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { Search } from "lucide-react";
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 
 export interface CommandProps extends React.HTMLAttributes<HTMLDivElement> {}
 export interface CommandInputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
@@ -14,7 +15,7 @@ export interface CommandSeparatorProps extends React.HTMLAttributes<HTMLDivEleme
 export interface CommandShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {}
 
 const Command = React.forwardRef<HTMLDivElement, CommandProps>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("bg-card rounded-xl border border-border shadow-lg overflow-hidden", className)} {...props} />
+  <div ref={ref} className={cn("bg-card rounded-xl border border-border overflow-hidden", elevation.popover, className)} {...props} />
 ));
 Command.displayName = "Command";
 

package/src/country-select.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Check, ChevronDown, Search } from "lucide-react";
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 import { ScrollLockTakeover } from "./scroll-lock";
 
 export interface Country {
@@ -107,7 +108,8 @@ const CountrySelect = React.forwardRef<HTMLButtonElement, CountrySelectProps>(
             aria-expanded={open}
             aria-haspopup="listbox"
             className={cn(
-              "flex h-11 min-h-11 w-full items-center justify-between gap-2.5 rounded-lg border border-border bg-card px-4 text-[15px] text-foreground shadow-sm",
+              "flex h-11 min-h-11 w-full items-center justify-between gap-2.5 rounded-lg border border-border bg-card px-4 text-[15px] text-foreground",
+              elevation.field,
               "transition-colors duration-pg-fast ease-pg-standard",
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35",
               "disabled:cursor-not-allowed disabled:opacity-50",
@@ -150,7 +152,8 @@ const CountrySelect = React.forwardRef<HTMLButtonElement, CountrySelectProps>(
               align="start"
               sideOffset={6}
               className={cn(
-                "z-[120] w-[var(--radix-popover-trigger-width)] min-w-[260px] rounded-xl border border-border bg-popover text-popover-foreground shadow-lg outline-none",
+                "z-[120] w-[var(--radix-popover-trigger-width)] min-w-[260px] rounded-xl border border-border bg-popover text-popover-foreground outline-none",
+                elevation.popover,
                 "data-[state=open]:opacity-100 data-[state=closed]:opacity-0 transition-opacity duration-150"
               )}
               onOpenAutoFocus={(e) => e.preventDefault()}

package/src/data-table.tsx

@@ -2,6 +2,7 @@
 
 import type { CSSProperties, ReactNode } from "react";
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 import { Shimmer } from "./skeleton";
 import { EmptyState } from "./empty-state";
 import {
@@ -1066,7 +1067,8 @@ export function DataTable<T>({
                             type="button"
                             onClick={() => rowCta?.onClick?.(row)}
                             className={cn(
-                              "inline-flex items-center font-medium text-foreground bg-card rounded-lg border border-border hover:border-muted-foreground/50 whitespace-nowrap shadow-sm",
+                              "inline-flex items-center font-medium text-foreground bg-card rounded-lg border border-border hover:border-muted-foreground/50 whitespace-nowrap",
+                              elevation.control,
                               compact
                                 ? "px-2.5 py-1 text-[11px]"
                                 : "px-3 py-1.5 text-[12px]"
@@ -1146,7 +1148,7 @@ const PAGE_BUTTON =
   "w-7 h-7 rounded-md flex items-center justify-center text-[12px] font-medium tabular-nums transition-colors";
 const PAGE_BUTTON_IDLE =
   "text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-30 disabled:cursor-not-allowed";
-const PAGE_BUTTON_ACTIVE = "bg-primary text-primary-foreground shadow-sm";
+const PAGE_BUTTON_ACTIVE = `bg-primary text-primary-foreground ${elevation.control}`;
 
 /**
  * One footer for every pagination mode, so a cursor-paged grid and a

package/src/date-picker.tsx

@@ -6,6 +6,7 @@ import { RemoveScroll } from "react-remove-scroll";
 import { ChevronLeft, ChevronRight, ChevronDown, CalendarDays } from "lucide-react";
 import { AnimatePresence, motion } from "framer-motion";
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 import { ScrollLockTakeover } from "./scroll-lock";
 
 /* ─── Constants ─────────────────────────────────────────────────────────── */
@@ -453,7 +454,7 @@ export function DatePicker({ value, onChange, placeholder = "Select date", class
                 <motion.div
                   initial={{ opacity: 0, y: -4 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -4 }}
                   transition={{ duration: 0.12 }}
-                  className="absolute top-full left-0 z-[10000] mt-1 max-h-[220px] min-w-[130px] overflow-y-auto rounded-xl border border-border bg-popover py-1 shadow-lg"
+                  className={`absolute top-full left-0 z-[10000] mt-1 max-h-[220px] min-w-[130px] overflow-y-auto rounded-xl border border-border bg-popover py-1 ${elevation.popover}`}
                 >
                   {MONTHS.map((mn, mi) => (
                     <button type="button" key={mn} onClick={() => { setViewMonth(mi); setMonthMenu(false); }}
@@ -480,7 +481,7 @@ export function DatePicker({ value, onChange, placeholder = "Select date", class
                 <motion.div
                   initial={{ opacity: 0, y: -4 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -4 }}
                   transition={{ duration: 0.12 }}
-                  className="absolute top-full left-0 z-[10000] mt-1 max-h-[200px] min-w-[90px] overflow-y-auto rounded-xl border border-border bg-popover py-1 shadow-lg"
+                  className={`absolute top-full left-0 z-[10000] mt-1 max-h-[200px] min-w-[90px] overflow-y-auto rounded-xl border border-border bg-popover py-1 ${elevation.popover}`}
                 >
                   {years.map(yr => (
                     <button type="button" key={yr} onClick={() => { setViewYear(yr); setYearMenu(false); }}
@@ -601,7 +602,10 @@ export function DatePicker({ value, onChange, placeholder = "Select date", class
           animate={{ opacity: 1, scale: 1, y: 0 }}
           exit={{ opacity: 0, scale: 0.97, y: -6 }}
           transition={{ duration: 0.16, ease: [0.16, 1, 0.3, 1] }}
-          className="isolate rounded-2xl border border-border bg-popover text-popover-foreground shadow-lg select-none dark:shadow-black/40"
+          className={cn(
+            "isolate rounded-2xl border border-border bg-popover text-popover-foreground select-none dark:shadow-black/40",
+            elevation.popover
+          )}
           style={{
             position:        "fixed",
             top:             panelPos.top,
@@ -645,7 +649,8 @@ export function DatePicker({ value, onChange, placeholder = "Select date", class
         type="button"
         onClick={() => open ? closePanel() : openPanel()}
         className={cn(
-          "flex h-12 min-h-12 w-full items-center gap-3 rounded-xl border border-border bg-card px-5 text-left text-[15px] shadow-sm transition-colors",
+          "flex h-12 min-h-12 w-full items-center gap-3 rounded-xl border border-border bg-card px-5 text-left text-[15px] transition-colors",
+          elevation.field,
           open ? "border-ring ring-2 ring-ring/20" : "hover:border-muted-foreground/45",
         )}
       >

package/src/dialog.tsx

@@ -4,6 +4,7 @@ import type { ComponentProps } from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 
 const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
@@ -41,7 +42,8 @@ function DialogContent({
           "fixed left-1/2 top-1/2 z-[101] w-[calc(100%-1.5rem)] max-w-[min(100%,26rem)] -translate-x-1/2 -translate-y-1/2",
           // Default padding reserves space for the close button.
           // Pass p-0 in className to opt out (manage padding per section).
-          "rounded-2xl border border-border bg-card p-6 pt-10 text-card-foreground shadow-2xl outline-none",
+          "rounded-2xl border border-border bg-card p-6 pt-10 text-card-foreground outline-none",
+          elevation.modal,
           "max-h-[min(90vh,720px)] overflow-y-auto",
           "data-[state=open]:opacity-100 data-[state=closed]:opacity-0 data-[state=open]:scale-100 data-[state=closed]:scale-[0.98]",
           "transition-[opacity,transform] duration-200 ease-out",

package/src/drawer.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 
 type DrawerSide = "right" | "left" | "top" | "bottom";
 const DrawerContext = React.createContext<{ side: DrawerSide }>({ side: "right" });
@@ -49,7 +50,7 @@ const DrawerContent = React.forwardRef<
       <DrawerOverlay />
       <DialogPrimitive.Content
         ref={ref}
-        className={cn("fixed z-50 flex flex-col bg-card border-border shadow-xl transition-all duration-pg-normal ease-pg-standard data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-200", sideClasses[side], className)}
+        className={cn(elevation.drawer, "fixed z-50 flex flex-col bg-card border-border transition-all duration-pg-normal ease-pg-standard data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-200", sideClasses[side], className)}
         {...props}
       >
         {children}

package/src/dropdown-menu.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
@@ -41,7 +42,8 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-[130] min-w-[8rem] overflow-hidden rounded-xl border border-border bg-popover p-1.5 text-popover-foreground shadow-lg",
+      "z-[130] min-w-[8rem] overflow-hidden rounded-xl border border-border bg-popover p-1.5 text-popover-foreground",
+      elevation.popover,
       "data-[state=open]:opacity-100 data-[state=closed]:opacity-0 transition-opacity duration-150",
       className
     )}
@@ -59,7 +61,8 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-[130] min-w-[11rem] overflow-hidden rounded-xl border border-border bg-popover p-1.5 text-popover-foreground shadow-lg",
+        "z-[130] min-w-[11rem] overflow-hidden rounded-xl border border-border bg-popover p-1.5 text-popover-foreground",
+      elevation.popover,
         "data-[state=open]:opacity-100 data-[state=closed]:opacity-0 transition-opacity duration-150",
         className
       )}

package/src/elevation.ts

@@ -0,0 +1,54 @@
+/**
+ * Elevation — the one place flux decides what casts a shadow.
+ *
+ * Shadows used to be typed inline at ~60 call sites, which is how the library
+ * drifted: a Card, an Alert and a Skeleton card are the same kind of surface,
+ * but nothing held them to the same value, and "the default card shadow" was
+ * whatever the last person wrote. These constants are that default, named.
+ *
+ * They are plain Tailwind utility strings rather than CSS custom properties on
+ * purpose. flux ships no stylesheet — consuming apps compile its classes via
+ * `@source ".../flux-ui/src"` — so a `--shadow-*` token would have to be
+ * redeclared in every app's globals.css and would silently resolve to nothing
+ * in any app that forgot. A literal class here is scanned like any other and
+ * needs no app-side setup.
+ *
+ * Changing a value here restyles every component that uses it. That is the point.
+ */
+export const elevation = {
+  /**
+   * Flat surfaces that sit ON the page and are delineated by their border:
+   * Card, chart surfaces, DataTableCard, Alert, SectionMessage, Skeleton.
+   * This is the shadow on the mca-home revenue card, and the reference the
+   * rest of the library was pulled onto.
+   */
+  surface: "shadow-sm",
+
+  /**
+   * Button-shaped things: Button, IconButton, ButtonGroup segments, the
+   * pagination page buttons, a table's row CTA. Just enough lift to read as
+   * pressable. Ghost and link variants stay flat and do not use this.
+   */
+  control: "shadow-sm",
+
+  /**
+   * Anything you type into or pick from: Input, Textarea, every select
+   * trigger, the date and time pickers, OTP boxes, Checkbox, Radio.
+   *
+   * Deliberately flat. A field is a well, not a raised object, and a form of
+   * ten shadowed controls reads as clutter. Emitted as an explicit
+   * `shadow-none` rather than by omitting the class so that a caller passing
+   * `shadow-sm` through `className` still wins under tailwind-merge.
+   */
+  field: "shadow-none",
+
+  /**
+   * Things that genuinely float above the page, where depth is the signal that
+   * says "this is detached and dismissible". Kept heavier than `surface` on
+   * purpose — flattening these is what makes a dropdown look painted on.
+   */
+  tooltip: "shadow-md",
+  popover: "shadow-lg",
+  drawer: "shadow-xl",
+  modal: "shadow-2xl",
+} as const;

package/src/flag.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { Info, CheckCircle2, AlertTriangle, XCircle, X } from "lucide-react";
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -150,7 +151,8 @@ const Flag = React.forwardRef<HTMLDivElement, FlagProps>(
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
         className={cn(
-          "relative w-80 overflow-hidden rounded-xl border border-border bg-card shadow-lg",
+          "relative w-80 overflow-hidden rounded-xl border border-border bg-card",
+          elevation.popover,
           "border-l-4",
           variantBorder[variant],
           className

package/src/icon-button.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 import { Loader2 } from "lucide-react";
 import { type ButtonHTMLAttributes, forwardRef } from "react";
 
@@ -14,15 +15,15 @@ export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>
 
 const variantClasses: Record<NonNullable<IconButtonProps["variant"]>, string> = {
   primary:
-    "bg-primary text-primary-foreground border border-primary shadow-sm hover:bg-[var(--primary-hover)]",
+    `bg-primary text-primary-foreground border border-primary ${elevation.control} hover:bg-[var(--primary-hover)]`,
   secondary:
-    "bg-muted text-foreground border border-border shadow-sm hover:bg-muted/85 dark:bg-muted/35 dark:text-foreground dark:border-border dark:hover:bg-muted/55",
+    `bg-muted text-foreground border border-border ${elevation.control} hover:bg-muted/85 dark:bg-muted/35 dark:text-foreground dark:border-border dark:hover:bg-muted/55`,
   ghost:
     "bg-transparent text-foreground border border-transparent hover:bg-muted focus-visible:bg-muted/80 active:bg-muted/90",
   outline:
-    "bg-card text-foreground border border-border shadow-sm hover:bg-muted",
+    `bg-card text-foreground border border-border ${elevation.control} hover:bg-muted`,
   danger:
-    "bg-red-600 text-white border border-red-600 shadow-sm hover:bg-red-700",
+    `bg-red-600 text-white border border-red-600 ${elevation.control} hover:bg-red-700`,
 };
 
 const sizeClasses: Record<NonNullable<IconButtonProps["size"]>, string> = {

package/src/index.ts

@@ -1,4 +1,5 @@
 export { cn } from "./utils";
+export { elevation } from "./elevation";
 
 // Layout
 export { Box, Stack, Inline } from "./layout";

package/src/inline-dialog.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { X } from "lucide-react";
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 import { ScrollLockTakeover } from "./scroll-lock";
 
 // ---------------------------------------------------------------------------
@@ -114,7 +115,8 @@ const InlineDialogContent = React.forwardRef<
           className={cn(
             // Base card
             "relative z-[120] max-w-xs overflow-visible",
-            "rounded-xl border border-border bg-card p-4 text-foreground shadow-lg",
+            "rounded-xl border border-border bg-card p-4 text-foreground",
+            elevation.popover,
             // Animation
             "data-[state=open]:opacity-100 data-[state=closed]:opacity-0",
             "transition-opacity duration-pg-fast ease-pg-standard",

package/src/inline-edit.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { Check, Pencil, X } from "lucide-react";
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 
 export interface InlineEditProps {
   value: string;
@@ -93,7 +94,8 @@ const InlineEdit = React.forwardRef<HTMLDivElement, InlineEditProps>(
     };
 
     const sharedInputClass = cn(
-      "w-full rounded-md border border-border bg-card px-2 py-1 text-[15px] leading-tight text-foreground shadow-sm",
+      "w-full rounded-md border border-border bg-card px-2 py-1 text-[15px] leading-tight text-foreground",
+      elevation.field,
       "placeholder:text-muted-foreground",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35",
       "transition-colors duration-pg-fast ease-pg-standard",

package/src/input-group.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 import { Input } from "./input";
 import { Textarea } from "./textarea";
 
@@ -13,7 +14,8 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="input-group"
       role="group"
       className={cn(
-        "group/input-group relative flex w-full items-stretch rounded-xl border border-border bg-card shadow-sm outline-none transition-[color,box-shadow] dark:bg-card/50",
+        "group/input-group relative flex w-full items-stretch rounded-xl border border-border bg-card outline-none transition-[color,box-shadow] dark:bg-card/50",
+        elevation.field,
         "min-h-11 h-11 has-[>textarea]:h-auto",
         "has-[>[data-align=inline-start]]:[&>input]:pl-2",
         "has-[>[data-align=inline-end]]:[&>input]:pr-2",