@payglocal_ui/flux-ui 0.3.4 → 0.3.5

package/src/input.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 
 const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
   ({ className, type, ...props }, ref) => {
@@ -8,7 +9,8 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
       <input
         type={type}
         className={cn(
-          "flex h-11 min-h-11 w-full rounded-lg border border-border bg-card px-4 py-2 text-[15px] leading-tight shadow-sm transition-colors",
+          "flex h-11 min-h-11 w-full rounded-lg border border-border bg-card px-4 py-2 text-[15px] leading-tight transition-colors",
+          elevation.field,
           "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
           "placeholder:text-muted-foreground",
           "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",

package/src/otp-input.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react";
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 
 export interface OtpInputProps {
   /** Current OTP value (controlled). */
@@ -105,7 +106,8 @@ export function OtpInput({
           onKeyDown={(e) => handleKeyDown(i, e)}
           onPaste={handlePaste}
           className={cn(
-            "h-12 w-11 rounded-lg border bg-card text-center text-lg font-semibold text-foreground shadow-sm transition-colors",
+            "h-12 w-11 rounded-lg border bg-card text-center text-lg font-semibold text-foreground transition-colors",
+            elevation.field,
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35 focus-visible:border-primary",
             "disabled:cursor-not-allowed disabled:opacity-50",
             invalid ? "border-destructive ring-destructive/20" : "border-input"

package/src/pagination.tsx

@@ -3,6 +3,7 @@
 import { forwardRef } from "react";
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 
 // ---------------------------------------------------------------------------
 // Pagination (nav wrapper)
@@ -78,7 +79,7 @@ export const PaginationLink = forwardRef<HTMLAnchorElement, PaginationLinkProps>
         "cursor-pointer select-none",
         // active
         isActive
-          ? "bg-primary text-primary-foreground border-primary shadow-sm"
+          ? `bg-primary text-primary-foreground border-primary ${elevation.control}`
           : "text-muted-foreground border-border hover:bg-muted hover:text-foreground",
         className
       )}

package/src/popover.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 import { ScrollLockTakeover } from "./scroll-lock";
 
 const Popover = PopoverPrimitive.Root;
@@ -31,7 +32,8 @@ const PopoverContent = React.forwardRef<
         // below) stops short of the fold rather than sitting flush against it.
         collisionPadding={collisionPadding}
         className={cn(
-          "z-[120] w-72 rounded-xl border border-border bg-popover p-4 text-popover-foreground shadow-lg outline-none",
+          "z-[120] w-72 rounded-xl border border-border bg-popover p-4 text-popover-foreground outline-none",
+          elevation.popover,
           "data-[state=open]:opacity-100 data-[state=closed]:opacity-0 transition-opacity duration-150",
           className
         )}

package/src/radio-group.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
@@ -27,7 +28,8 @@ const RadioGroupItem = React.forwardRef<
   <RadioGroupPrimitive.Item
     ref={ref}
     className={cn(
-      "size-4 shrink-0 rounded-full border border-border bg-card shadow-sm",
+      "size-4 shrink-0 rounded-full 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",
       "data-[state=checked]:border-primary",

package/src/section-message.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Info, CheckCircle2, AlertTriangle, XCircle, Sparkles } from "lucide-react";
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 
 export type SectionMessageVariant = "info" | "success" | "warning" | "error" | "discovery";
 
@@ -56,7 +57,8 @@ const SectionMessage = React.forwardRef<HTMLDivElement, SectionMessageProps>(
           ref={ref}
           role="region"
           className={cn(
-            "flex w-full gap-4 rounded-xl border border-l-4 border-border p-5 shadow-sm transition-colors duration-pg-fast ease-pg-standard",
+            "flex w-full gap-4 rounded-xl border border-l-4 border-border p-5 transition-colors duration-pg-fast ease-pg-standard",
+            elevation.surface,
             config.border,
             config.bg,
             className

package/src/select.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
@@ -32,7 +33,8 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex w-full items-center justify-between rounded-lg border border-border bg-card text-foreground shadow-sm outline-none",
+      "flex w-full items-center justify-between rounded-lg border border-border bg-card text-foreground outline-none",
+      elevation.field,
       selectTriggerSizes[size],
       "ring-ring/50 focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50",
       "[&>span]:line-clamp-1",
@@ -84,7 +86,8 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-[120] max-h-[min(24rem,var(--radix-select-content-available-height))] min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-lg",
+        "relative z-[120] max-h-[min(24rem,var(--radix-select-content-available-height))] min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground",
+        elevation.popover,
         "data-[state=open]:opacity-100 data-[state=closed]:opacity-0 transition-opacity duration-150",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",

package/src/single-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 { filterOptions, type OptionFilter } from "./option-filter";
 import { ScrollLockTakeover } from "./scroll-lock";
 
@@ -121,7 +122,8 @@ const SingleSelect = React.forwardRef<HTMLButtonElement, SingleSelectProps>(
             aria-haspopup="listbox"
             aria-invalid={invalid || undefined}
             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",
               "aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/25 dark:aria-invalid:ring-destructive/40",
@@ -152,7 +154,8 @@ const SingleSelect = React.forwardRef<HTMLButtonElement, SingleSelectProps>(
               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"
               )}
             >
@@ -166,7 +169,8 @@ const SingleSelect = React.forwardRef<HTMLButtonElement, SingleSelectProps>(
                     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"
                     )}

package/src/skeleton.tsx

@@ -1,4 +1,5 @@
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 
 interface ShimmerProps {
   className?: string;
@@ -12,7 +13,12 @@ export function Shimmer({ className, rounded = "md" }: ShimmerProps) {
 
 export function StatCardSkeleton() {
   return (
-    <div className="bg-card text-card-foreground rounded-xl p-5 flex flex-col gap-3 border border-border shadow-sm">
+    <div
+      className={cn(
+        "bg-card text-card-foreground rounded-xl p-5 flex flex-col gap-3 border border-border",
+        elevation.surface
+      )}
+    >
       <div className="flex items-center justify-between">
         <Shimmer className="h-3 w-28" />
         <Shimmer className="h-10 w-10" rounded="full" />

package/src/slider.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 
 export interface SliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {}
 
@@ -16,7 +17,10 @@ const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, S
       <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted">
         <SliderPrimitive.Range className="absolute h-full bg-primary" />
       </SliderPrimitive.Track>
-      <SliderPrimitive.Thumb className="block h-[18px] w-[18px] rounded-full border-2 border-primary bg-card shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35 disabled:pointer-events-none disabled:opacity-50" />
+      <SliderPrimitive.Thumb className={cn(
+          "block h-[18px] w-[18px] rounded-full border-2 border-primary bg-card transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35 disabled:pointer-events-none disabled:opacity-50",
+          elevation.control
+        )} />
     </SliderPrimitive.Root>
   )
 );

package/src/sonner.tsx

@@ -3,6 +3,7 @@
 import { useTheme } from "next-themes";
 import { Toaster as Sonner, type ToasterProps } from "sonner";
 import { useEffect, useState } from "react";
+import { elevation } from "./elevation";
 
 /** Drop-in toast host; pair with `toast` from `sonner`. Resolves theme via next-themes when mounted. */
 export function Toaster({ theme, ...props }: ToasterProps) {
@@ -20,7 +21,7 @@ export function Toaster({ theme, ...props }: ToasterProps) {
       toastOptions={{
         classNames: {
           toast:
-            "bg-[var(--popover)] text-[var(--popover-foreground)] border-[var(--border)] shadow-lg rounded-[10px] text-[13px]",
+            `bg-[var(--popover)] text-[var(--popover-foreground)] border-[var(--border)] ${elevation.popover} rounded-[10px] text-[13px]`,
           description: "text-[var(--muted-foreground)]",
         },
       }}

package/src/spotlight.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { X, ChevronLeft, ChevronRight, Check } from "lucide-react";
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 
 export interface SpotlightStep {
   title: string;
@@ -27,7 +28,7 @@ const SpotlightCard = React.forwardRef<HTMLDivElement, SpotlightCardProps>(
   ({ title, body, image, currentStep, totalSteps, onNext, onBack, onDismiss, nextLabel, className }, ref) => {
     const isLast = currentStep !== undefined && totalSteps !== undefined && currentStep >= totalSteps - 1;
     return (
-      <div ref={ref} className={cn("bg-card border border-border rounded-xl shadow-xl p-5 w-72", className)}>
+      <div ref={ref} className={cn("bg-card border border-border rounded-xl p-5 w-72", elevation.surface, className)}>
         {onDismiss && (
           <button
             onClick={onDismiss}

package/src/switch.tsx

@@ -5,6 +5,7 @@ import * as SwitchPrimitive from "@radix-ui/react-switch";
 import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 
 const switchRootVariants = cva(
   [
@@ -31,7 +32,8 @@ const switchRootVariants = cva(
 
 const switchThumbVariants = cva(
   [
-    "pointer-events-none block rounded-full bg-white shadow-sm",
+    "pointer-events-none block rounded-full bg-white",
+    elevation.control,
     "transition-transform duration-pg-fast ease-pg-standard",
     "ring-0",
   ],

package/src/textarea.tsx

@@ -1,13 +1,15 @@
 import * as React from "react";
 
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
   ({ className, ...props }, ref) => {
     return (
       <textarea
         className={cn(
-          "flex min-h-[5.5rem] w-full rounded-lg border border-border bg-card px-4 py-3 text-[15px] leading-relaxed shadow-sm transition-colors",
+          "flex min-h-[5.5rem] w-full rounded-lg border border-border bg-card px-4 py-3 text-[15px] leading-relaxed transition-colors",
+          elevation.field,
           "placeholder:text-muted-foreground",
           "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
           "disabled:cursor-not-allowed disabled:opacity-50",

package/src/time-picker.tsx

@@ -5,6 +5,7 @@ import { createPortal } from "react-dom";
 import { RemoveScroll } from "react-remove-scroll";
 import { Clock, ChevronDown, X } from "lucide-react";
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 import { ScrollLockTakeover } from "./scroll-lock";
 
 /* ─── Types ──────────────────────────────────────────────────────────────── */
@@ -338,7 +339,8 @@ export const TimePicker = React.forwardRef<HTMLButtonElement, TimePickerProps>(
         <div
           ref={panelRef}
           className={cn(
-            "isolate rounded-xl border border-border bg-popover text-popover-foreground shadow-lg",
+            "isolate rounded-xl border border-border bg-popover text-popover-foreground",
+            elevation.popover,
             "flex flex-col gap-0"
           )}
           style={{
@@ -432,7 +434,8 @@ export const TimePicker = React.forwardRef<HTMLButtonElement, TimePickerProps>(
           disabled={disabled}
           onClick={() => (open ? setOpen(false) : openPanel())}
           className={cn(
-            "flex h-11 min-h-11 w-full items-center gap-3 rounded-lg border border-border bg-card px-4 text-left text-[15px] shadow-sm",
+            "flex h-11 min-h-11 w-full items-center gap-3 rounded-lg border border-border bg-card px-4 text-left text-[15px]",
+            elevation.field,
             "transition-colors duration-150",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35",
             open && "border-ring ring-2 ring-ring/35",

package/src/tooltip.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cn } from "./utils";
+import { elevation } from "./elevation";
 
 const TooltipProvider = TooltipPrimitive.Provider;
 const Tooltip = TooltipPrimitive.Root;
@@ -17,7 +18,8 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-[130] max-w-xs overflow-hidden rounded-lg border border-border bg-popover px-3 py-2 text-sm leading-snug text-popover-foreground shadow-md",
+        "z-[130] max-w-xs overflow-hidden rounded-lg border border-border bg-popover px-3 py-2 text-sm leading-snug text-popover-foreground",
+        elevation.tooltip,
         className
       )}
       {...props}