@payglocal_ui/flux-ui 0.1.0

package/src/heading.tsx

@@ -0,0 +1,202 @@
+import * as React from "react";
+import { cn } from "./utils";
+
+// ---------------------------------------------------------------------------
+// Heading
+// ---------------------------------------------------------------------------
+
+export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+  as?: React.ElementType;
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+  color?: "default" | "subtle" | "primary";
+}
+
+const headingSizeClasses: Record<NonNullable<HeadingProps["size"]>, string> = {
+  xs: "text-sm font-semibold",
+  sm: "text-base font-semibold",
+  md: "text-lg font-semibold",
+  lg: "text-xl font-semibold",
+  xl: "text-2xl font-semibold",
+  "2xl": "text-3xl font-semibold tracking-tight",
+  "3xl": "text-4xl font-semibold tracking-tight",
+};
+
+const headingColorClasses: Record<NonNullable<HeadingProps["color"]>, string> = {
+  default: "text-foreground",
+  subtle: "text-muted-foreground",
+  primary: "text-primary",
+};
+
+const defaultSizeForLevel: Record<number, NonNullable<HeadingProps["size"]>> = {
+  1: "2xl",
+  2: "md",
+  3: "md",
+  4: "sm",
+  5: "xs",
+  6: "xs",
+};
+
+export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
+  (
+    {
+      level = 2,
+      as,
+      size,
+      color = "default",
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const Tag = (as ?? (`h${level}` as React.ElementType)) as React.ElementType;
+    const resolvedSize = size ?? defaultSizeForLevel[level] ?? "md";
+
+    return (
+      <Tag
+        ref={ref}
+        className={cn(
+          headingSizeClasses[resolvedSize],
+          headingColorClasses[color],
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </Tag>
+    );
+  }
+);
+Heading.displayName = "Heading";
+
+// ---------------------------------------------------------------------------
+// Text
+// ---------------------------------------------------------------------------
+
+export interface TextProps extends React.HTMLAttributes<HTMLElement> {
+  as?: "p" | "span" | "div" | "label";
+  size?: "xs" | "sm" | "md" | "lg";
+  weight?: "normal" | "medium" | "semibold";
+  color?: "default" | "subtle" | "primary" | "disabled";
+  truncate?: boolean;
+}
+
+const textSizeClasses: Record<NonNullable<TextProps["size"]>, string> = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg",
+};
+
+const textWeightClasses: Record<NonNullable<TextProps["weight"]>, string> = {
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+};
+
+const textColorClasses: Record<NonNullable<TextProps["color"]>, string> = {
+  default: "text-foreground",
+  subtle: "text-muted-foreground",
+  primary: "text-primary",
+  disabled: "text-muted-foreground opacity-50",
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const Text = React.forwardRef<any, TextProps>(
+  (
+    {
+      as: Tag = "p",
+      size = "sm",
+      weight = "normal",
+      color = "default",
+      truncate = false,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <Tag
+        ref={ref}
+        className={cn(
+          textSizeClasses[size],
+          textWeightClasses[weight],
+          textColorClasses[color],
+          truncate && "truncate",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </Tag>
+    );
+  }
+);
+Text.displayName = "Text";
+
+// ---------------------------------------------------------------------------
+// MetricText
+// ---------------------------------------------------------------------------
+
+export interface MetricTextProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "prefix"> {
+  size?: "sm" | "md" | "lg" | "xl";
+  trend?: "up" | "down" | "neutral";
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+}
+
+const metricSizeClasses: Record<NonNullable<MetricTextProps["size"]>, string> = {
+  sm: "text-xl",
+  md: "text-2xl",
+  lg: "text-3xl",
+  xl: "text-4xl",
+};
+
+const metricTrendClasses: Record<NonNullable<MetricTextProps["trend"]>, string> = {
+  up: "text-green-600",
+  down: "text-red-600",
+  neutral: "text-foreground",
+};
+
+export const MetricText = React.forwardRef<HTMLSpanElement, MetricTextProps>(
+  (
+    {
+      size = "md",
+      trend = "neutral",
+      prefix,
+      suffix,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          "font-semibold tabular-nums tracking-tight",
+          metricSizeClasses[size],
+          metricTrendClasses[trend],
+          className
+        )}
+        {...props}
+      >
+        {prefix != null && (
+          <span className="mr-0.5 text-[0.75em] font-medium opacity-70">
+            {prefix}
+          </span>
+        )}
+        {children}
+        {suffix != null && (
+          <span className="ml-0.5 text-[0.75em] font-medium opacity-70">
+            {suffix}
+          </span>
+        )}
+      </span>
+    );
+  }
+);
+MetricText.displayName = "MetricText";

package/src/icon-button.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { cn } from "./utils";
+import { Loader2 } from "lucide-react";
+import { type ButtonHTMLAttributes, forwardRef } from "react";
+
+export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  "aria-label": string;
+  variant?: "primary" | "secondary" | "ghost" | "outline" | "danger";
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  isLoading?: boolean;
+  rounded?: "sm" | "md" | "lg" | "full";
+}
+
+const variantClasses: Record<NonNullable<IconButtonProps["variant"]>, string> = {
+  primary:
+    "bg-primary text-primary-foreground border border-primary shadow-sm 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",
+  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",
+  danger:
+    "bg-red-600 text-white border border-red-600 shadow-sm hover:bg-red-700",
+};
+
+const sizeClasses: Record<NonNullable<IconButtonProps["size"]>, string> = {
+  xs: "size-7 min-w-7",
+  sm: "size-8 min-w-8",
+  md: "size-9 min-w-9",
+  lg: "size-10 min-w-10",
+  xl: "size-11 min-w-11",
+};
+
+const iconSizeClasses: Record<NonNullable<IconButtonProps["size"]>, string> = {
+  xs: "size-3.5",
+  sm: "size-3.5",
+  md: "size-4",
+  lg: "size-[1.125rem]",
+  xl: "size-5",
+};
+
+const roundedClasses: Record<NonNullable<IconButtonProps["rounded"]>, string> = {
+  sm: "rounded-md",
+  md: "rounded-lg",
+  lg: "rounded-xl",
+  full: "rounded-full",
+};
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  (
+    {
+      variant = "primary",
+      size = "md",
+      isLoading = false,
+      rounded = "lg",
+      className,
+      disabled,
+      children,
+      "aria-label": ariaLabel,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <button
+        ref={ref}
+        aria-label={ariaLabel}
+        title={ariaLabel}
+        disabled={disabled || isLoading}
+        className={cn(
+          "inline-flex shrink-0 items-center justify-center font-medium",
+          "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",
+          variantClasses[variant],
+          sizeClasses[size],
+          roundedClasses[rounded],
+          className
+        )}
+        {...props}
+      >
+        {isLoading ? (
+          <Loader2 className={cn("animate-spin", iconSizeClasses[size])} />
+        ) : (
+          children
+        )}
+      </button>
+    );
+  }
+);
+IconButton.displayName = "IconButton";

package/src/index.ts

@@ -0,0 +1,332 @@
+export { cn } from "./utils";
+
+// Layout
+export { Box, Stack, Inline } from "./layout";
+export type { BoxProps, StackProps, InlineProps, LayoutSpacing } from "./layout";
+export { Grid, Flex } from "./grid-flex";
+export type { GridProps, GridCols, GridFlow, ResponsiveCols, FlexProps, FlexDirection, FlexAlign, FlexJustify, FlexWrap } from "./grid-flex";
+
+// Button
+export { Button } from "./button";
+export type { ButtonProps } from "./button";
+export { ButtonGroup, SplitButton, SplitButtonItem } from "./button-group";
+export type { ButtonGroupProps, SplitButtonProps, SplitButtonItemProps } from "./button-group";
+
+// Inputs
+export { Input } from "./input";
+export { PasswordInput } from "./password-input";
+export type { PasswordInputProps } from "./password-input";
+export { OtpInput } from "./otp-input";
+export type { OtpInputProps } from "./otp-input";
+export { CheckboxSelect } from "./checkbox-select";
+export type { CheckboxSelectProps, CheckboxSelectOption } from "./checkbox-select";
+export { Textarea } from "./textarea";
+export { Label } from "./label";
+export { Checkbox } from "./checkbox";
+export type { CheckboxProps } from "./checkbox";
+export { RadioGroup, RadioGroupItem } from "./radio-group";
+export type { RadioGroupItemProps } from "./radio-group";
+export { Switch } from "./switch";
+export type { SwitchProps } from "./switch";
+export { Slider } from "./slider";
+export type { SliderProps } from "./slider";
+
+// Form (validation wrapper)
+export {
+  Form,
+  FormField,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormError,
+  FormItem,
+  useForm,
+} from "./form";
+export type {
+  FormProps,
+  FormFieldProps,
+  FormValues,
+  FormErrors,
+  FieldConfig,
+  FieldsConfig,
+  RegisterResult,
+  UseFormReturn,
+  ValidatorRule,
+} from "./form";
+
+// Form fields
+export {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+} from "./field";
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from "./input-group";
+export { CurrencyAmountInput } from "./currency-amount-input";
+
+// Surfaces
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card";
+export { Separator } from "./separator";
+export { ScrollArea, ScrollBar } from "./scroll-area";
+
+// SideNav
+export {
+  SideNav,
+  SideNavHeader,
+  SideNavSection,
+  SideNavItem,
+  SideNavFooter,
+} from "./side-nav";
+export type { SideNavProps, SideNavItemProps } from "./side-nav";
+
+// Navigation
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+} from "./breadcrumb";
+export {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+} from "./pagination";
+export type {
+  PaginationProps,
+  PaginationContentProps,
+  PaginationItemProps,
+  PaginationLinkProps,
+  PaginationPreviousProps,
+  PaginationNextProps,
+  PaginationEllipsisProps,
+} from "./pagination";
+export { Link } from "./link";
+export type { LinkProps } from "./link";
+
+// Labels & Badges
+export { Badge } from "./badge";
+export type { BadgeProps } from "./badge";
+export { Lozenge } from "./lozenge";
+export type { LozengeProps } from "./lozenge";
+export { Tag, TagGroup } from "./tag";
+export type { TagProps, TagGroupProps } from "./tag";
+export { StatusBadge } from "./status-badge";
+export type { StatusBadgeProps, BadgeVariant, BadgeTrailIcon } from "./status-badge";
+
+// Overlays
+export { Blanket } from "./blanket";
+export type { BlanketProps } from "./blanket";
+export { Spotlight, SpotlightCard, useSpotlight } from "./spotlight";
+export type { SpotlightProps, SpotlightCardProps, SpotlightStep, UseSpotlightReturn } from "./spotlight";
+export {
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogClose,
+  DialogContent,
+  DialogTitle,
+  DialogDescription,
+} from "./dialog";
+export {
+  Drawer,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+} from "./drawer";
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from "./popover";
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./tooltip";
+
+// Menu (standalone vertical)
+export { Menu, MenuSection, MenuItem, MenuDivider } from "./menu";
+export type { MenuProps, MenuSectionProps, MenuItemProps } from "./menu";
+
+// Menus & Select
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from "./dropdown-menu";
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+} from "./select";
+export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut } from "./command";
+export type {
+  CommandProps,
+  CommandInputProps,
+  CommandListProps,
+  CommandEmptyProps,
+  CommandGroupProps,
+  CommandItemProps,
+  CommandSeparatorProps,
+  CommandShortcutProps,
+} from "./command";
+
+// Tabs & Accordion
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "./accordion";
+
+// Messaging & Feedback
+export { Alert, AlertTitle, AlertDescription, Banner } from "./alert";
+export type { AlertProps, BannerProps } from "./alert";
+export { Callout, CalloutIcon, CalloutTitle, CalloutText } from "./callout";
+export type { CalloutProps, CalloutVariant } from "./callout";
+export {
+  SectionMessage,
+  SectionMessageTitle,
+  SectionMessageContent,
+  SectionMessageActions,
+} from "./section-message";
+export type { SectionMessageProps, SectionMessageVariant } from "./section-message";
+export { Spinner } from "./spinner";
+export type { SpinnerProps } from "./spinner";
+export { Progress, ProgressTracker } from "./progress";
+export type { ProgressProps, ProgressTrackerStep, ProgressTrackerProps } from "./progress";
+
+// Loading & Skeleton
+export { Shimmer, StatCardSkeleton, TableRowSkeleton, ChartSkeleton } from "./skeleton";
+
+// Data display
+export { DataTable } from "./data-table";
+export type { Column, DataTableDensity, DataTableFooterSummary, DataTableHeaderStyle } from "./data-table";
+export { EmptyState } from "./empty-state";
+export { PageHeader } from "./page-header";
+export { Code, CodeBlock } from "./code";
+export type { CodeProps, CodeBlockProps } from "./code";
+
+// Avatar
+export { Avatar, AvatarImage, AvatarFallback } from "./avatar";
+export { AvatarGroup } from "./avatar-group";
+export type { AvatarGroupProps, AvatarGroupItem } from "./avatar-group";
+export { AvatarTag } from "./avatar-tag";
+export type { AvatarTagProps, AvatarTagSize } from "./avatar-tag";
+
+// Date & Calendar
+export { Calendar, CalendarDayButton } from "./calendar";
+export type { CalendarProps } from "./calendar";
+export type { DateRange } from "react-day-picker";
+export { DatePicker } from "./date-picker";
+
+// Charts
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+} from "./chart";
+export type { ChartConfig } from "./chart";
+export {
+  MetricSparklineCard,
+  DashboardAreaChartTemplate,
+  GroupedBarChartTemplate,
+  RankedBarListTemplate,
+  CategoryBarChartTemplate,
+  MiniSparklineChartCard,
+  AttentionListTemplate,
+} from "./chart-templates";
+export type {
+  MetricSparklinePoint,
+  MetricSparklineCardProps,
+  DashboardAreaChartPoint,
+  DashboardAreaChartTemplateProps,
+  GroupedBarSeries,
+  GroupedBarChartTemplateProps,
+  RankedBarItem,
+  RankedBarListTemplateProps,
+  CategoryBarPoint,
+  CategoryBarChartTemplateProps,
+  MiniSparklinePoint,
+  MiniSparklineStat,
+  MiniSparklineChartCardProps,
+  AttentionListItem,
+  AttentionListTemplateProps,
+} from "./chart-templates";
+
+// Toast
+export { Toaster, toast } from "./sonner";
+
+// Inline Edit
+export { InlineEdit } from "./inline-edit";
+export type { InlineEditProps } from "./inline-edit";
+
+// Inline Dialog
+export { InlineDialog, InlineDialogTrigger, InlineDialogContent } from "./inline-dialog";
+export type { InlineDialogProps, InlineDialogContentProps } from "./inline-dialog";
+
+// Flag notifications
+export { Flag, FlagGroup, useFlagGroup } from "./flag";
+export type { FlagProps, FlagGroupProps, FlagVariant, FlagAction, FlagGroupPosition, UseFlagGroupReturn } from "./flag";
+
+// Responsive Show/Hide
+export { Show, Hide, useBreakpoint } from "./responsive";
+export type { ShowProps, HideProps, Breakpoint, UseBreakpointReturn } from "./responsive";
+
+// Country Select
+export { CountrySelect, COUNTRIES } from "./country-select";
+export type { CountrySelectProps, Country } from "./country-select";
+
+// Button variants
+export { IconButton } from "./icon-button";
+export type { IconButtonProps } from "./icon-button";
+
+// Inputs
+export { TimePicker } from "./time-picker";
+export type { TimePickerProps } from "./time-picker";
+
+// Typography
+export { Heading, Text, MetricText } from "./heading";
+export type { HeadingProps, TextProps, MetricTextProps } from "./heading";
+
+// Status
+export { ProgressIndicator } from "./progress-indicator";
+export type { ProgressIndicatorProps } from "./progress-indicator";
+
+// Utility
+export { VisuallyHidden } from "./visually-hidden";
+export type { VisuallyHiddenProps } from "./visually-hidden";