@meta-1/design 0.0.199 → 0.0.201

package/src/components/uix/data-table/index.tsx

@@ -23,10 +23,12 @@ import {
   type DropdownMenuItemProps,
   Filters,
   type FiltersProps,
+  type Formatters,
   generateColumnStorageKey,
   Pagination,
   type PaginationProps,
   Spin,
+  ValueFormatter,
 } from "@meta-1/design";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../ui/table";
 import "./style.css";
@@ -36,7 +38,6 @@ import classNames from "classnames";
 import get from "lodash/get";
 
 import { UIXContext } from "@meta-1/design/components/uix/config-provider";
-import { type Formatters, type FunctionMap, formatValue } from "@meta-1/design/components/uix/value-formatter";
 
 export interface StickyColumnProps {
   key: string;
@@ -63,7 +64,6 @@ export interface DataTableProps<TData> {
   load?: (params?: unknown) => Promise<unknown> | unknown;
   filter?: FiltersProps;
   pagination?: PaginationProps | boolean;
-  cellHandles?: FunctionMap;
   empty?: string;
   showHeader?: boolean;
   onRowClick?: (row: Row<TData>) => void;
@@ -170,7 +170,6 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
     loading,
     pagination,
     load,
-    cellHandles,
     showHeader = true,
     inCard = false,
     maxHeight,
@@ -429,10 +428,14 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
                 const render = ctx.renderValue;
                 // biome-ignore lint/suspicious/noExplicitAny: <formatters>
                 const formatters = (cell.column.columnDef as any).formatters || [];
-                ctx.renderValue = () => {
-                  return formatValue(render(), formatters, cellHandles);
-                };
-                const content = flexRender(cell.column.columnDef.cell, ctx);
+                const hasFormatters = formatters.length > 0;
+                // biome-ignore lint/suspicious/noExplicitAny: <cellValue can be any type>
+                const cellValue: any = render();
+                const content = hasFormatters ? (
+                  <ValueFormatter formatters={formatters} value={cellValue} />
+                ) : (
+                  flexRender(cell.column.columnDef.cell, ctx)
+                );
                 return (
                   <TableCell
                     className={cn(

package/src/components/uix/date-picker/index.tsx

@@ -4,7 +4,7 @@ import { addDays, format } from "date-fns";
 import get from "lodash/get";
 import { Calendar as CalendarIcon } from "lucide-react";
 
-import { Button, Calendar, cn, Popover, PopoverContent, PopoverTrigger, Select } from "@meta-1/design";
+import { Button, Calendar, cn, Popover, Select } from "@meta-1/design";
 import { UIXContext } from "@meta-1/design/components/uix/config-provider";
 
 export type DatePickerProps = {
@@ -118,53 +118,62 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((props, _r
 
   const calendar = <Calendar locale={locale} mode="single" onSelect={handleSelect} selected={selectedDate} />;
 
+  const content = (
+    <>
+      {preset ? (
+        <>
+          <Select
+            className="w-full"
+            onChange={handlePresetChange}
+            options={options || []}
+            placeholder="请选择"
+            value={presetValue}
+          />
+          <div className="rounded-md border">{calendar}</div>
+        </>
+      ) : (
+        calendar
+      )}
+    </>
+  );
+
   return (
-    <Popover onOpenChange={handleOpenChange} open={popoverOpen}>
-      <PopoverTrigger asChild disabled={disabled}>
-        <Button
-          className={cn(
-            "group w-full justify-start space-x-1 text-left font-normal",
-            !selectedDate && "text-muted-foreground",
-            className,
-          )}
-          disabled={disabled}
-          variant="outline"
-        >
-          <CalendarIcon className="mr-2 h-4 w-4" />
-          <span className="flex-1">{selectedDate ? format(selectedDate, formatConfig) : placeholder}</span>
-          {allowClear && selectedDate && !disabled ? (
-            <span
-              aria-label="Clear date"
-              className="hidden cursor-pointer items-center justify-center group-hover:flex"
-              onClick={handleClear}
-              onPointerDown={(pointerEvent) => {
-                pointerEvent.preventDefault();
-                pointerEvent.stopPropagation();
-              }}
-              role="button"
-              tabIndex={-1}
-            >
-              <Cross2Icon />
-            </span>
-          ) : null}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent align="start" className={cn("flex w-fit", preset ? "flex-col space-y-2 p-2" : "p-0")}>
-        {preset ? (
-          <>
-            <Select
-              className="w-full"
-              onChange={handlePresetChange}
-              options={options || []}
-              placeholder="请选择"
-              value={presetValue}
-            />
-            <div className="rounded-md border">{calendar}</div>
-          </>
-        ) : (
-          calendar
+    <Popover
+      align="start"
+      asChild
+      className={cn("flex w-fit", preset ? "flex-col gap-calendar p-calendar" : "p-0")}
+      content={content}
+      disabled={disabled}
+      onOpenChange={handleOpenChange}
+      open={popoverOpen}
+    >
+      <Button
+        className={cn(
+          "group min-h-8 w-full justify-start gap-1 p-select text-left font-normal",
+          !selectedDate && "text-muted-foreground",
+          className,
         )}
-      </PopoverContent>
+        disabled={disabled}
+        variant="outline"
+      >
+        <CalendarIcon className="mr-2 h-4 w-4" />
+        <span className="flex-1">{selectedDate ? format(selectedDate, formatConfig) : placeholder}</span>
+        {allowClear && selectedDate && !disabled ? (
+          <span
+            aria-label="Clear date"
+            className="hidden cursor-pointer items-center justify-center group-hover:flex"
+            onClick={handleClear}
+            onPointerDown={(pointerEvent) => {
+              pointerEvent.preventDefault();
+              pointerEvent.stopPropagation();
+            }}
+            role="button"
+            tabIndex={-1}
+          >
+            <Cross2Icon />
+          </span>
+        ) : null}
+      </Button>
     </Popover>
   );
 });

package/src/components/uix/date-range-picker/index.tsx

@@ -1,68 +1,148 @@
-import { forwardRef, type HTMLAttributes, useContext, useState } from "react";
+import { forwardRef, type HTMLAttributes, type MouseEvent, useContext, useEffect, useState } from "react";
+import { Cross2Icon } from "@radix-ui/react-icons";
 import { format } from "date-fns";
 import get from "lodash/get";
 import { Calendar as CalendarIcon } from "lucide-react";
 import type { DateRange } from "react-day-picker";
 
-import { Button, Calendar, Popover, PopoverContent, PopoverTrigger } from "@meta-1/design";
+import { Button, Calendar, Popover } from "@meta-1/design";
 import { UIXContext } from "@meta-1/design/components/uix/config-provider";
 import { cn } from "@meta-1/design/lib";
 
+export type { DateRange } from "react-day-picker";
+
 export type DateRangePickerProps = {
   value?: DateRange;
-  onChange?: (value: DateRange) => void;
+  onChange?: (value: DateRange | undefined) => void;
   placeholder?: string;
   format?: string;
-} & HTMLAttributes<HTMLDivElement>;
+  allowClear?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+} & Omit<HTMLAttributes<HTMLDivElement>, "onChange">;
 
 export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((props, forwardedRef) => {
-  const { className, value, onChange } = props;
+  const { className, value, onChange, allowClear = false, open, onOpenChange } = props;
   const elementRef = forwardedRef;
 
+  const hasValueProp = Object.hasOwn(props, "value");
+  const isValueControlled = hasValueProp;
+  const hasOpenProp = Object.hasOwn(props, "open");
+  const isOpenControlled = hasOpenProp;
+  const [internalDate, setInternalDate] = useState<DateRange | undefined>(value);
+  const [internalOpen, setInternalOpen] = useState(false);
+
+  useEffect(() => {
+    if (isValueControlled) {
+      setInternalDate(value);
+    }
+  }, [isValueControlled, value]);
+
+  useEffect(() => {
+    if (isOpenControlled) {
+      setInternalOpen(Boolean(open));
+    }
+  }, [isOpenControlled, open]);
+
   const config = useContext(UIXContext);
   const locale = get(config.locale, "DateRangePicker.locale");
   const formatConfig = props.format || get(config.locale, "DateRangePicker.format") || "yyyy-MM-dd";
 
-  const [date, setDate] = useState<DateRange | undefined>(value);
+  const selectedDate = isValueControlled ? value : internalDate;
+  const popoverOpen = isOpenControlled ? open : internalOpen;
+
+  const closePopover = () => {
+    if (!isOpenControlled) {
+      setInternalOpen(false);
+    }
+    onOpenChange?.(false);
+  };
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    onOpenChange?.(nextOpen);
+    if (!isOpenControlled) {
+      setInternalOpen(nextOpen);
+    }
+  };
+
+  const handleClear = (event: MouseEvent<SVGSVGElement | HTMLSpanElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!isValueControlled) {
+      setInternalDate(undefined);
+    }
+    onChange?.(undefined);
+  };
+
+  const content = (
+    <Calendar
+      defaultMonth={selectedDate?.from}
+      initialFocus
+      locale={locale}
+      mode="range"
+      numberOfMonths={2}
+      onSelect={(v) => {
+        if (!isValueControlled) {
+          setInternalDate(v);
+        }
+        onChange?.(v);
+        if (v?.to) {
+          closePopover();
+        }
+      }}
+      selected={selectedDate}
+    />
+  );
 
   return (
     <div className={cn("grid gap-2", className)} ref={elementRef}>
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button
-            className={cn("justify-start text-left font-normal", !date && "text-muted-foreground")}
-            id="date"
-            type="button"
-            variant="outline"
-          >
-            <CalendarIcon className="mr-2 h-4 w-4" />
-            {date?.from ? (
-              date.to ? (
+      <Popover
+        align="start"
+        asChild
+        className="w-auto p-0"
+        content={content}
+        onOpenChange={handleOpenChange}
+        open={popoverOpen}
+      >
+        <Button
+          className={cn(
+            "group min-h-8 justify-start gap-1 p-select text-left font-normal",
+            !selectedDate && "text-muted-foreground",
+          )}
+          id="date"
+          type="button"
+          variant="outline"
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          <span className="flex-1">
+            {selectedDate?.from ? (
+              selectedDate.to ? (
                 <>
-                  {format(date.from, formatConfig)} - {format(date.to, formatConfig)}
+                  {format(selectedDate.from, formatConfig)} - {format(selectedDate.to, formatConfig)}
                 </>
               ) : (
-                format(date.from, formatConfig)
+                format(selectedDate.from, formatConfig)
               )
             ) : (
-              <span>{props.placeholder}</span>
+              props.placeholder
             )}
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent align="start" className="w-auto p-0">
-          <Calendar
-            defaultMonth={date?.from}
-            initialFocus
-            locale={locale}
-            mode="range"
-            numberOfMonths={2}
-            onSelect={(v) => {
-              setDate(v);
-              onChange?.(v!);
-            }}
-            selected={date}
-          />
-        </PopoverContent>
+          </span>
+          {allowClear && selectedDate?.from ? (
+            <span
+              aria-label="Clear date range"
+              className="hidden cursor-pointer items-center justify-center group-hover:flex"
+              onClick={handleClear}
+              onPointerDown={(pointerEvent) => {
+                pointerEvent.preventDefault();
+                pointerEvent.stopPropagation();
+              }}
+              role="button"
+              tabIndex={-1}
+            >
+              <Cross2Icon />
+            </span>
+          ) : null}
+        </Button>
       </Popover>
     </div>
   );

package/src/components/uix/dialog/index.tsx

@@ -49,22 +49,22 @@ export const Dialog: FC<DialogProps> = (props) => {
       <DialogContent
         aria-describedby={undefined}
         autoFocus={false}
-        className={cn(className)}
+        className={cn("gap-dialog rounded-dialog", className)}
         onClick={(e) => e.stopPropagation()}
         onCloseClick={onCancel}
         onOverlayClick={maskClosable ? onCancel : () => {}}
         showClose={closable}
       >
-        <DialogHeader className={cn(!title && !description && "sr-only")}>
-          <DialogTitle className={cn(!title && "sr-only")}>{title || "Dialog"}</DialogTitle>
+        <DialogHeader className={cn("p-dialog pb-0", !title && !description && "sr-only")}>
+          <DialogTitle className={cn("leading-normal", !title && "sr-only")}>{title || "Dialog"}</DialogTitle>
           {description ? <DialogDescription>{description}</DialogDescription> : null}
         </DialogHeader>
         <div className="min-h-0 flex-1 overflow-auto">
-          <div className={cn("px-6 py-1", fitContent && "w-full min-w-fit", !footer && "!pb-6", contentClassName)}>
+          <div className={cn("px-dialog", fitContent && "w-full min-w-fit", !footer && "pb-dialog", contentClassName)}>
             {props.children}
           </div>
         </div>
-        {footer ? <DialogFooter>{footer}</DialogFooter> : null}
+        {footer ? <DialogFooter className="p-dialog pt-0">{footer}</DialogFooter> : null}
         {loading ? (
           <div
             className={cn(

package/src/components/uix/dropdown/index.tsx

@@ -109,7 +109,7 @@ export const Dropdown: FC<DropdownProps> = (props) => {
   return (
     <DropdownMenu modal={modal} onOpenChange={props.onOpenChange} open={open}>
       <DropdownMenuTrigger asChild={asChild}>{props.children}</DropdownMenuTrigger>
-      <DropdownMenuContent align={align} className={cn(props.className)} side={side}>
+      <DropdownMenuContent align={align} className={cn("rounded-popover p-popover", props.className)} side={side}>
         {items.filter((item) => !item.hidden).map((child) => renderItem(child, { onItemClick, onCheckedChange }))}
       </DropdownMenuContent>
     </DropdownMenu>

package/src/components/uix/input/index.tsx

@@ -0,0 +1,23 @@
+import type { ComponentProps } from "react";
+import { forwardRef } from "react";
+
+import { Input as UIInput } from "@meta-1/design/components/ui/input";
+import { cn } from "@meta-1/design/lib";
+
+export type InputProps = Omit<ComponentProps<typeof UIInput>, "size" | "onChange"> & {
+  onChange?: (value: string) => void;
+};
+
+export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  const { className, onChange, ...rest } = props;
+  return (
+    <UIInput
+      {...rest}
+      className={cn("h-input rounded-input px-input", className)}
+      onChange={(e) => onChange?.(e.target.value)}
+      ref={ref}
+    />
+  );
+});
+
+Input.displayName = "Input";

package/src/components/uix/message/index.tsx

@@ -9,7 +9,7 @@ export const useMessage = () => {
           unstyled: true,
           ...options,
           className:
-            "group w-full max-w-sm border-success-foreground/20 bg-success/80 text-success-foreground rounded-lg border px-4 py-3 shadow-lg flex items-start gap-3 backdrop-blur-sm overflow-hidden",
+            "group w-full max-w-sm border-success-foreground/20 bg-success/80 text-success-foreground rounded-message border p-message shadow-lg flex items-start gap-3 backdrop-blur-sm overflow-hidden",
           descriptionClassName: "text-sm truncate",
         });
       },
@@ -18,7 +18,7 @@ export const useMessage = () => {
           unstyled: true,
           ...options,
           className:
-            "group w-full max-w-sm border-error-foreground/20 bg-error/80 text-error-foreground rounded-lg border px-4 py-3 shadow-lg flex items-start gap-3 backdrop-blur-sm overflow-hidden",
+            "group w-full max-w-sm border-error-foreground/20 bg-error/80 text-error-foreground rounded-message border p-message shadow-lg flex items-start gap-3 backdrop-blur-sm overflow-hidden",
           descriptionClassName: "text-sm truncate",
         });
       },
@@ -27,7 +27,7 @@ export const useMessage = () => {
           unstyled: true,
           ...options,
           className:
-            "group w-full max-w-sm border-warning-foreground/20 bg-warning/80 text-warning-foreground rounded-lg border px-4 py-3 shadow-lg flex items-start gap-3 backdrop-blur-sm overflow-hidden",
+            "group w-full max-w-sm border-warning-foreground/20 bg-warning/80 text-warning-foreground rounded-message border p-message shadow-lg flex items-start gap-3 backdrop-blur-sm overflow-hidden",
           descriptionClassName: "text-sm truncate",
         });
       },
@@ -36,7 +36,7 @@ export const useMessage = () => {
           unstyled: true,
           ...options,
           className:
-            "group w-full max-w-sm border-info-foreground/20 bg-info/80 text-info-foreground rounded-lg border px-4 py-3 shadow-lg flex items-start gap-3 backdrop-blur-sm overflow-hidden",
+            "group w-full max-w-sm border-info-foreground/20 bg-info/80 text-info-foreground rounded-message border p-message shadow-lg flex items-start gap-3 backdrop-blur-sm overflow-hidden",
           descriptionClassName: "text-sm truncate",
         });
       },

package/src/components/uix/pagination/index.tsx

@@ -1,9 +1,9 @@
 import { type FC, useRef, useState } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 
-import { Button } from "@meta-1/design/components/ui/button";
-import { Input } from "@meta-1/design/components/ui/input";
-import { Tabs, TabsList, TabsTrigger } from "@meta-1/design/components/ui/tabs";
+import { Button } from "@meta-1/design/components/uix/button";
+import { Input } from "@meta-1/design/components/uix/input";
+import { Tabs } from "@meta-1/design/components/uix/tabs";
 
 export interface PaginationProps {
   total: number;
@@ -67,8 +67,8 @@ export const Pagination: FC<PaginationProps> = ({
     setTimeout(() => inputRef.current?.select(), 0);
   };
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value.replace(/[^\d]/g, "");
+  const handleInputChange = (v: string) => {
+    const value = v.replace(/[^\d]/g, "");
     setInputValue(value);
   };
 
@@ -90,19 +90,12 @@ export const Pagination: FC<PaginationProps> = ({
   return (
     <div className="flex w-full items-center justify-between gap-3">
       <div className="flex items-center gap-1">
-        <Button
-          className="h-9 w-9"
-          disabled={page === 1}
-          onClick={() => onChange?.(page - 1)}
-          size="icon"
-          variant="outline"
-        >
-          <ChevronLeft className="h-4 w-4" />
+        <Button className="size-button" disabled={page === 1} onClick={() => onChange?.(page - 1)} variant="outline">
+          <ChevronLeft className="size-4" />
         </Button>
-
         {isEditing ? (
           <Input
-            className="h-9 w-16 rounded px-2 text-center"
+            className="w-16 min-w-[70px] rounded text-center"
             onBlur={handleJump}
             onChange={handleInputChange}
             onKeyDown={handleKeyDown}
@@ -112,31 +105,28 @@ export const Pagination: FC<PaginationProps> = ({
           />
         ) : (
           <div
-            className="flex h-9 min-w-[60px] cursor-pointer items-center justify-center rounded-md border bg-background px-3 font-medium text-sm transition-colors hover:bg-accent"
+            className="flex h-input min-w-[70px] cursor-pointer items-center justify-center rounded-md border bg-background px-3 font-medium text-sm transition-colors hover:bg-accent"
             onClick={handlePageClick}
           >
             {page} / {totalPages}
           </div>
         )}
-
         <Button
-          className="h-9 w-9"
+          className="size-button"
           disabled={page === totalPages}
           onClick={() => onChange?.(page + 1)}
-          size="icon"
           variant="outline"
         >
-          <ChevronRight className="h-4 w-4" />
+          <ChevronRight className="size-4" />
         </Button>
       </div>
 
       <div className="hidden items-center gap-1 md:flex">
         {pageNumbers.map((pageNum) => (
           <Button
-            className="h-9 w-9"
+            className="min-w-button p-0"
             key={pageNum}
             onClick={() => onChange?.(pageNum)}
-            size="icon"
             variant={pageNum === page ? "default" : "outline"}
           >
             {pageNum}
@@ -145,15 +135,11 @@ export const Pagination: FC<PaginationProps> = ({
       </div>
 
       {onPageSizeChange && (
-        <Tabs onValueChange={(v) => onPageSizeChange(Number(v))} value={`${size}`}>
-          <TabsList>
-            {pageSizeOptions.map((option) => (
-              <TabsTrigger key={option} value={`${option}`}>
-                {option}
-              </TabsTrigger>
-            ))}
-          </TabsList>
-        </Tabs>
+        <Tabs
+          items={pageSizeOptions.map((option) => ({ label: `${option}`, value: `${option}` }))}
+          onChange={(v) => onPageSizeChange(Number(v))}
+          value={`${size}`}
+        />
       )}
     </div>
   );

package/src/components/uix/popover/index.tsx

@@ -0,0 +1,30 @@
+import { CSSProperties, FC, PropsWithChildren, ReactNode } from "react";
+
+import { PopoverContent, PopoverTrigger, Popover as UIPopover } from "@meta-1/design/components/ui/popover";
+import { cn } from "@meta-1/design/lib";
+
+export type PopoverProps = PropsWithChildren<{
+  content: ReactNode;
+  className?: string;
+  asChild?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  style?: CSSProperties;
+  align?: "start" | "center" | "end";
+  side?: "top" | "right" | "bottom" | "left";
+  disabled?: boolean;
+}>;
+
+export const Popover: FC<PopoverProps> = (props) => {
+  const { children, content, className, asChild, open, onOpenChange, style, align, side, disabled } = props;
+  return (
+    <UIPopover onOpenChange={onOpenChange} open={open}>
+      <PopoverTrigger asChild={asChild} disabled={disabled}>
+        {children}
+      </PopoverTrigger>
+      <PopoverContent align={align} className={cn("rounded-popover p-popover", className)} side={side} style={style}>
+        {content}
+      </PopoverContent>
+    </UIPopover>
+  );
+};

package/src/components/uix/radio-group/index.tsx

@@ -1,4 +1,4 @@
-import { type FC, forwardRef, type PropsWithChildren, useState } from "react";
+import { type FC, forwardRef, type PropsWithChildren, useId } from "react";
 
 import { Label } from "@meta-1/design/components/ui/label";
 import { RadioGroupItem, RadioGroup as UIRadioGroup } from "@meta-1/design/components/ui/radio-group";
@@ -18,7 +18,7 @@ export interface RadioGroupProps extends PropsWithChildren {
 export const RadioGroup: FC<RadioGroupProps> = forwardRef((props, _ref) => {
   const { options = [], value, onChange, disabled = false } = props;
 
-  const [labelKey] = useState(Date.now());
+  const labelKey = useId();
 
   return (
     <UIRadioGroup disabled={disabled} onValueChange={onChange} value={value}>

package/src/components/uix/select/index.tsx

@@ -85,12 +85,15 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>((props, _ref) =
       value={currentValue as string | undefined}
     >
       <div className={cn("relative inline-block", allowClear && currentValue && !disabled ? "group" : "", className)}>
-        <SelectTrigger className={cn("flex w-full", triggerClassName)}>
+        <SelectTrigger
+          className={cn("flex h-select w-full rounded-select px-select", triggerClassName)}
+          size={"none" as "sm" | "default"}
+        >
           <SelectValue placeholder={placeholder} />
         </SelectTrigger>
         {allowClear && currentValue && !disabled && (
           <div
-            className="absolute top-0 right-0 z-50 hidden h-full cursor-pointer items-center justify-center px-3 group-hover:flex"
+            className="absolute top-0 right-0 z-50 hidden h-full cursor-pointer items-center justify-center px-2 group-hover:flex"
             onClick={clear}
           >
             <XIcon className="size-4 opacity-50" />
@@ -100,6 +103,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>((props, _ref) =
       <SelectContent
         align={props.align}
         alignOffset={props.alignOffset}
+        className="rounded-select"
         side={props.side}
         sideOffset={props.sideOffset}
       >