@meta-1/design 0.0.198 → 0.0.200

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

@@ -0,0 +1,76 @@
+import { FC } from "react";
+
+import { ScrollArea } from "@meta-1/design/components/ui/scroll-area";
+import {
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+  Sheet as UISheet,
+} from "@meta-1/design/components/ui/sheet";
+import { cn } from "@meta-1/design/lib/utils";
+
+export type SheetProps = {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  content?: React.ReactNode;
+  children?: React.ReactNode;
+  side?: "top" | "right" | "bottom" | "left";
+  className?: string;
+  closable?: boolean;
+  asChild?: boolean;
+  footer?: React.ReactNode;
+  maskClosable?: boolean;
+};
+
+export const Sheet: FC<SheetProps> = (props) => {
+  const {
+    open,
+    onOpenChange,
+    title,
+    description,
+    content,
+    children,
+    side,
+    className,
+    closable,
+    asChild,
+    footer,
+    maskClosable = true,
+  } = props;
+  return (
+    <UISheet onOpenChange={onOpenChange} open={open}>
+      <SheetTrigger asChild={asChild}>{children}</SheetTrigger>
+      <SheetContent
+        className={cn(
+          "gap-sheet",
+          "[&>button:last-child]:flex [&>button:last-child]:items-center [&>button:last-child]:justify-center",
+          className,
+          closable === false && "[&>button:last-child]:hidden",
+        )}
+        onInteractOutside={(e) => {
+          if (!maskClosable) {
+            e.preventDefault();
+          }
+        }}
+        side={side}
+      >
+        <SheetHeader className={cn("p-sheet pb-0", !title && !description && "sr-only")}>
+          <SheetTitle className={cn(!title && "sr-only")}>{title || "Sheet"}</SheetTitle>
+          <SheetDescription className={cn(!description && "sr-only")}>
+            {description || "Sheet content"}
+          </SheetDescription>
+        </SheetHeader>
+        <ScrollArea className="flex-1">{content}</ScrollArea>
+        {footer != null && <SheetFooter className="p-sheet pt-0">{footer}</SheetFooter>}
+      </SheetContent>
+    </UISheet>
+  );
+};
+
+export { SheetClose };

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

@@ -0,0 +1,38 @@
+import { FC } from "react";
+
+import { TabsContent, TabsList, TabsTrigger, Tabs as UITabs } from "../../ui/tabs";
+
+export type TabsItem = {
+  label: string;
+  value: string;
+  content?: React.ReactNode;
+};
+
+export type TabsProps = {
+  items: TabsItem[];
+  defaultValue?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+};
+
+export const Tabs: FC<TabsProps> = (props) => {
+  const { items, defaultValue, value, onChange } = props;
+  return (
+    <UITabs defaultValue={defaultValue} onValueChange={onChange} value={value}>
+      <TabsList className="h-tabs-title rounded-tabs-title">
+        {items.map((item) => (
+          <TabsTrigger className="rounded-tabs-title" key={item.value} value={item.value}>
+            {item.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      {items.map((item) =>
+        item.content ? (
+          <TabsContent key={item.value} value={item.value}>
+            {item.content}
+          </TabsContent>
+        ) : null,
+      )}
+    </UITabs>
+  );
+};

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

@@ -17,6 +17,7 @@ export interface TagsInputProps {
   separator?: string | RegExp;
   validate?: (tag: string) => boolean;
   disabled?: boolean;
+  allowClear?: boolean;
   onTagAdd?: (tag: string) => void;
   onTagRemove?: (tag: string) => void;
   renderTag?: (tag: string, index: number, remove: () => void) => React.ReactNode;
@@ -37,6 +38,7 @@ export const TagsInput = forwardRef<HTMLDivElement, TagsInputProps>((props, ref)
     separator = ",",
     validate,
     disabled = false,
+    allowClear = false,
     onTagAdd,
     onTagRemove,
     renderTag,
@@ -147,10 +149,16 @@ export const TagsInput = forwardRef<HTMLDivElement, TagsInputProps>((props, ref)
     inputRef.current?.focus();
   };
 
+  const clearAll = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    handleChange([]);
+    setInputValue("");
+  };
+
   const defaultRenderTag = (tag: string, index: number, remove: () => void) => (
     <div
       className={cn(
-        "inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-1 text-sm transition-colors",
+        "inline-flex items-center gap-0.5 rounded-input bg-secondary px-1.5 py-0.5 text-xs transition-colors",
         "hover:bg-secondary/80",
         disabled && "pointer-events-none opacity-50",
         tagClassName,
@@ -167,7 +175,7 @@ export const TagsInput = forwardRef<HTMLDivElement, TagsInputProps>((props, ref)
           }}
           type="button"
         >
-          <XIcon className="h-3 w-3" />
+          <XIcon className="size-4" />
         </button>
       )}
     </div>
@@ -176,7 +184,8 @@ export const TagsInput = forwardRef<HTMLDivElement, TagsInputProps>((props, ref)
   return (
     <div
       className={cn(
-        "flex min-h-9 w-full flex-wrap gap-1.5 rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow]",
+        "group relative flex min-h-input w-full flex-wrap gap-0.5 rounded-input border border-input bg-transparent py-0.5 text-sm shadow-xs transition-[color,box-shadow]",
+        currentTags.length > 0 ? "px-0.5" : "px-input",
         "focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50",
         disabled && "pointer-events-none cursor-not-allowed opacity-50",
         "dark:bg-input/30",
@@ -195,6 +204,7 @@ export const TagsInput = forwardRef<HTMLDivElement, TagsInputProps>((props, ref)
         className={cn(
           "min-w-[120px] flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground",
           "disabled:pointer-events-none disabled:cursor-not-allowed",
+          allowClear && currentTags.length > 0 && "pr-6",
           inputClassName,
         )}
         disabled={disabled || (maxTags !== undefined && currentTags.length >= maxTags)}
@@ -208,6 +218,15 @@ export const TagsInput = forwardRef<HTMLDivElement, TagsInputProps>((props, ref)
         type="text"
         value={inputValue}
       />
+
+      {allowClear && currentTags.length > 0 && !disabled && (
+        <div
+          className="absolute top-0 right-0 z-10 hidden h-full cursor-pointer items-center justify-center px-2 group-hover:flex"
+          onClick={clearAll}
+        >
+          <XIcon className="size-4 opacity-50" />
+        </div>
+      )}
     </div>
   );
 });

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

@@ -0,0 +1,23 @@
+import { forwardRef } from "react";
+
+import { Textarea as UITextarea } from "@meta-1/design/components/ui/textarea";
+import { cn } from "@meta-1/design/lib/utils";
+
+export interface TextareaProps extends Omit<React.ComponentProps<"textarea">, "onChange"> {
+  className?: string;
+  onChange?: (value: string) => void;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>((props, forwardedRef) => {
+  const { className, onChange, ...rest } = props;
+  const elementRef = forwardedRef;
+
+  return (
+    <UITextarea
+      className={cn("rounded-input p-input", className)}
+      onChange={(e) => onChange?.(e.target.value)}
+      {...rest}
+      ref={elementRef}
+    />
+  );
+});

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

@@ -4,8 +4,9 @@ import {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-  Tooltip as TooltipUI,
+  Tooltip as UITooltip,
 } from "@meta-1/design/components/ui/tooltip";
+import { cn } from "@meta-1/design/lib/utils";
 
 type Side = "top" | "right" | "bottom" | "left";
 
@@ -21,12 +22,12 @@ export const Tooltip: FC<TooltipProps> = (props) => {
   const { open, onOpenChange, className } = props;
   return (
     <TooltipProvider>
-      <TooltipUI onOpenChange={onOpenChange} open={open}>
+      <UITooltip onOpenChange={onOpenChange} open={open}>
         <TooltipTrigger asChild={true}>{props.children}</TooltipTrigger>
-        <TooltipContent className={className} side={props.side}>
+        <TooltipContent className={cn("rounded-tooltip p-tooltip", className)} side={props.side}>
           {props.content}
         </TooltipContent>
-      </TooltipUI>
+      </UITooltip>
     </TooltipProvider>
   );
 };

package/src/components/uix/tree/style.css

@@ -1,4 +1,5 @@
 @import "../../../assets/style/theme.css";
+@import "../action/style.css";
 
 .rc-tree-focused:not(.rc-tree-active-focused) {
   @apply border-none;

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

@@ -2,19 +2,7 @@ import { type FC, type ReactNode, useEffect, useMemo, useRef, useState } from "r
 import { CaretSortIcon, Cross2Icon } from "@radix-ui/react-icons";
 import classNames from "classnames";
 
-import {
-  cn,
-  Empty,
-  type EmptyProps,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  ScrollArea,
-  Spin,
-  Tree,
-  type TreeData,
-  useSize,
-} from "@meta-1/design";
+import { cn, Empty, type EmptyProps, Popover, ScrollArea, Spin, Tree, type TreeData, useSize } from "@meta-1/design";
 import { Button } from "@meta-1/design/components/ui/button";
 
 export type TreeSelectProps = {
@@ -80,60 +68,67 @@ export const TreeSelect: FC<TreeSelectProps> = (props) => {
     }
   }, [value]);
 
+  const content = (
+    <ScrollArea className={classNames("flex max-h-[30vh] flex-col", contentClassName)}>
+      {treeData?.length ? (
+        <Tree
+          expandedKeys={expandedKeys}
+          onExpand={(expandedKeys) => setExpandedKeys(expandedKeys as string[])}
+          onSelect={(selectedKeys, { selected }) => {
+            if (selected) {
+              onChange?.(selectedKeys[0] as string);
+              setSelectedKeys(selectedKeys as string[]);
+            }
+            setOpen(false);
+          }}
+          selectedKeys={selectedKeys}
+          treeData={treeData}
+        />
+      ) : (
+        <Empty {...(emptyProps ?? {})} />
+      )}
+    </ScrollArea>
+  );
+
   return (
-    <Popover onOpenChange={setOpen} open={open}>
-      <PopoverTrigger asChild disabled={loading || disabled}>
-        <Button
-          aria-expanded={open}
-          className={cn(
-            "group h-9 min-w-[150px] items-center justify-between px-2 py-1 align-middle hover:bg-secondary/40",
-            className,
-          )}
-          disabled={loading || disabled}
-          ref={containerRef}
-          variant="outline"
-        >
-          <div className="flex flex-1 items-center justify-center">
-            <div className="flex flex-1">{showValue}</div>
-            {loading ? (
-              <Spin />
-            ) : (
-              <div className="flex items-center">
-                <CaretSortIcon className={cn("block h-4 w-4", showClear ? "group-hover:hidden" : "")} />
-                <Cross2Icon
-                  className={cn("hidden h-4 w-4", showClear ? "group-hover:block" : "")}
-                  onClick={(e) => {
-                    setSelectedKeys([]);
-                    onChange?.(undefined);
-                    e.stopPropagation();
-                  }}
-                />
-              </div>
-            )}
-          </div>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="p-0" style={{ width: size.width }}>
-        <ScrollArea className={classNames("flex max-h-[30vh] flex-col", contentClassName)}>
-          {treeData?.length ? (
-            <Tree
-              expandedKeys={expandedKeys}
-              onExpand={(expandedKeys) => setExpandedKeys(expandedKeys as string[])}
-              onSelect={(selectedKeys, { selected }) => {
-                if (selected) {
-                  onChange?.(selectedKeys[0] as string);
-                  setSelectedKeys(selectedKeys as string[]);
-                }
-                setOpen(false);
-              }}
-              selectedKeys={selectedKeys}
-              treeData={treeData}
-            />
+    <Popover
+      asChild
+      className="p-0"
+      content={content}
+      disabled={loading || disabled}
+      onOpenChange={setOpen}
+      open={open}
+      style={{ width: size.width }}
+    >
+      <Button
+        aria-expanded={open}
+        className={cn(
+          "group h-9 min-w-[150px] items-center justify-between px-2 py-1 align-middle hover:bg-secondary/40",
+          className,
+        )}
+        disabled={loading || disabled}
+        ref={containerRef}
+        variant="outline"
+      >
+        <div className="flex flex-1 items-center justify-center">
+          <div className="flex flex-1">{showValue}</div>
+          {loading ? (
+            <Spin />
           ) : (
-            <Empty {...(emptyProps ?? {})} />
+            <div className="flex items-center">
+              <CaretSortIcon className={cn("block h-4 w-4", showClear ? "group-hover:hidden" : "")} />
+              <Cross2Icon
+                className={cn("hidden h-4 w-4", showClear ? "group-hover:block" : "")}
+                onClick={(e) => {
+                  setSelectedKeys([]);
+                  onChange?.(undefined);
+                  e.stopPropagation();
+                }}
+              />
+            </div>
           )}
-        </ScrollArea>
-      </PopoverContent>
+        </div>
+      </Button>
     </Popover>
   );
 };

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

@@ -222,7 +222,7 @@ export const Uploader = forwardRef<HTMLDivElement, UploaderProps>((props, forwar
           <div
             className={cn(
               "flex items-center justify-center p-6 text-card-foreground/50",
-              "rounded-md border-2 border-border border-dashed bg-card",
+              "rounded-input border-2 border-border border-dashed bg-card",
               "cursor-default",
               "focus:border-primary",
               isMaxFilesReached && "cursor-not-allowed opacity-50",

package/src/components/uix/value-formatter/index.tsx

@@ -1,59 +1,53 @@
-import { type FC, forwardRef, type PropsWithChildren } from "react";
+import { forwardRef, type PropsWithChildren } from "react";
 
-import * as BUILT_IN from "@meta-1/design/lib/formatters";
+// biome-ignore lint/suspicious/noExplicitAny: <formatter functions can accept any value type>
+export type Formatter = (value: any) => any;
+export type Formatters = Formatter[];
 
-// biome-ignore lint/suspicious/noExplicitAny: <formatters>
-export type Formatters = ([string, any[]] | string)[];
-// biome-ignore lint/suspicious/noExplicitAny: <functionMap>
-export type FunctionMap = Record<string, (value: any, ...args: any[]) => any>;
-
-const _handles: FunctionMap = {};
-
-export const register = (handles: FunctionMap) => {
-  Object.assign(_handles, handles);
-};
-
-// biome-ignore lint/suspicious/noExplicitAny: <v>
-export const formatValue = (v: any, formatters: Formatters, all?: FunctionMap) => {
-  // biome-ignore lint/suspicious/noExplicitAny: <merged>
-  const merged: any = { ...BUILT_IN, ..._handles, ...(all ?? {}) };
-  // biome-ignore lint/suspicious/noExplicitAny: <fallback>
-  const fallback = (v: any, ..._p: any[]) => v;
-  // biome-ignore lint/suspicious/noExplicitAny: <params>
-  let params: any[] = [];
+// biome-ignore lint/suspicious/noExplicitAny: <formatter functions can accept any value type>
+export const formatValue = (v: any, formatters: Formatters) => {
   let result = v;
 
-  for (const filter of formatters) {
-    let call = fallback;
-    if (typeof filter === "string") {
-      call = merged[filter] || fallback;
-    } else if (typeof filter === "function") {
-      call = filter;
-    } else if (typeof filter === "object" && filter.length) {
-      call = merged[filter[0]] || fallback;
-      params = filter[1];
-    }
-    try {
-      result = call(result, ...params);
-    } catch {
-      console.log("formatter error", filter);
+  for (const formatter of formatters) {
+    if (typeof formatter === "function") {
+      try {
+        result = formatter(result);
+      } catch (error) {
+        console.warn("Formatter error:", error);
+      }
     }
   }
   return result;
 };
 
 export interface ValueFormatterProps extends PropsWithChildren {
-  // biome-ignore lint/suspicious/noExplicitAny: <value>
+  // biome-ignore lint/suspicious/noExplicitAny: <formatters chain can transform value to any type>
   value?: any;
-  // biome-ignore lint/suspicious/noExplicitAny: <formatters>
-  formatters?: any[];
-  handles?: FunctionMap;
+  formatters?: Formatters;
+}
+
+function ValueFormatterInner(props: ValueFormatterProps, _ref: React.ForwardedRef<never>) {
+  const { formatters = [], value, children } = props;
+  const v = value === 0 ? value : value || children;
+  const formatted = formatValue(v, formatters);
+  return <>{formatted}</>;
 }
 
-export const ValueFormatter: FC<ValueFormatterProps> = forwardRef((props, _ref) => {
-  const { handles, formatters = [], value, children } = props;
-  let v = value === 0 ? value : value || children;
-  if (!formatters.includes("defaultValue")) formatters.push("defaultValue");
-  v = formatValue(v, formatters, handles);
-  return <>{v}</>;
-});
+ValueFormatterInner.displayName = "ValueFormatter";
+
+export const ValueFormatter = forwardRef(ValueFormatterInner);
+
+/**
+ * 类型辅助函数，用于为 formatters 提供类型信息
+ * 使用示例：
+ * ```tsx
+ * const formatters = createFormatters<string[]>([
+ *   (v) => v.join("|"),
+ *   (v) => v.toUpperCase(),
+ * ]);
+ * <ValueFormatter value={["a", "b"]} formatters={formatters} />
+ * ```
+ */
+export function createFormatters<TInput = any>(formatters: Array<(value: TInput) => any>): Formatters {
+  return formatters as Formatters;
+}

package/src/index.ts

@@ -17,16 +17,6 @@ export {
   BreadcrumbSeparator,
 } from "./components/ui/breadcrumb";
 export { Calendar } from "./components/ui/calendar";
-export {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-} from "./components/ui/command";
 export {
   ContextMenu,
   ContextMenuCheckboxItem,
@@ -50,13 +40,7 @@ export {
   HoverCardContent,
   HoverCardTrigger,
 } from "./components/ui/hover-card";
-export { Input } from "./components/ui/input";
 export * from "./components/ui/navigation-menu";
-export {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "./components/ui/popover";
 export { Progress } from "./components/ui/progress";
 export {
   ResizableHandle,
@@ -65,16 +49,6 @@ export {
 } from "./components/ui/resizable";
 export { ScrollArea, ScrollBar } from "./components/ui/scroll-area";
 export { Separator } from "./components/ui/separator";
-export {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "./components/ui/sheet";
 export { Skeleton } from "./components/ui/skeleton";
 export { Slider } from "./components/ui/slider";
 // base
@@ -89,21 +63,17 @@ export {
   TableHeader,
   TableRow,
 } from "./components/ui/table";
-export { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
-export { Textarea } from "./components/ui/textarea";
 // advanced components
 export type { ActionProps } from "./components/uix/action";
 export { Action } from "./components/uix/action";
 export type { AlertProps } from "./components/uix/alert";
 export { Alert } from "./components/uix/alert";
-export type { ConfirmProps } from "./components/uix/alert-dialog";
+export type { AlertDialogProps, ConfirmProps } from "./components/uix/alert-dialog";
 export { useAlert } from "./components/uix/alert-dialog";
 export type { AvatarProps } from "./components/uix/avatar";
 export { Avatar } from "./components/uix/avatar";
 export type { BadgeProps, BadgeVariant } from "./components/uix/badge";
 export { Badge } from "./components/uix/badge";
-export type { BreadcrumbsItemProps, BreadcrumbsProps } from "./components/uix/breadcrumbs";
-export { Breadcrumbs, BreadcrumbsItem } from "./components/uix/breadcrumbs";
 export type { BroadcastChannelProviderProps } from "./components/uix/broadcast-channel-context";
 export { BroadcastChannelProvider, useBroadcastChannel } from "./components/uix/broadcast-channel-context";
 export type { ButtonProps } from "./components/uix/button";
@@ -116,13 +86,17 @@ export type { CheckboxGroupOptionProps, CheckboxGroupProps } from "./components/
 export { CheckboxGroup } from "./components/uix/checkbox-group";
 export type { ComboSelectOptionProps, ComboSelectProps, ComboSelectValueType } from "./components/uix/combo-select";
 export { ComboSelect } from "./components/uix/combo-select";
+export type { CommandItemProps, CommandProps } from "./components/uix/command";
+export { Command } from "./components/uix/command";
 export type { ConfigProviderProps } from "./components/uix/config-provider";
 export { ConfigProvider } from "./components/uix/config-provider";
+export type { DataGridColumn, DataGridProps, StickyColumnProps } from "./components/uix/data-grid";
+export { DataGrid } from "./components/uix/data-grid";
 export type { DataTableColumn, DataTableProps } from "./components/uix/data-table";
 export { DataTable } from "./components/uix/data-table";
 export type { DatePickerProps } from "./components/uix/date-picker";
 export { DatePicker } from "./components/uix/date-picker";
-export type { DateRangePickerProps } from "./components/uix/date-range-picker";
+export type { DateRange, DateRangePickerProps } from "./components/uix/date-range-picker";
 export { DateRangePicker } from "./components/uix/date-range-picker";
 export type { DialogProps } from "./components/uix/dialog";
 export { Dialog } from "./components/uix/dialog";
@@ -138,26 +112,36 @@ export type { FieldItem, FormInstance, FormProps, RenderProps } from "./componen
 export { Form, FormItem } from "./components/uix/form";
 export type { ImageProps } from "./components/uix/image";
 export { Image } from "./components/uix/image";
+export { Input } from "./components/uix/input";
 export type { LoadingProps } from "./components/uix/loading";
 export { Loading } from "./components/uix/loading";
 export { useMessage } from "./components/uix/message";
 export type { PaginationProps } from "./components/uix/pagination";
 export { Pagination } from "./components/uix/pagination";
+export type { PopoverProps } from "./components/uix/popover";
+export { Popover } from "./components/uix/popover";
 export type { RadioGroupOptionProps, RadioGroupProps } from "./components/uix/radio-group";
 export { RadioGroup } from "./components/uix/radio-group";
 export type { ResultProps } from "./components/uix/result";
 export { Result } from "./components/uix/result";
 export type { SelectOptionProps, SelectProps } from "./components/uix/select";
 export { Select } from "./components/uix/select";
-export { Space } from "./components/uix/space";
+export type { SheetProps } from "./components/uix/sheet";
+export {
+  Sheet,
+  SheetClose,
+} from "./components/uix/sheet";
 export type { SpinProps } from "./components/uix/spin";
 export { Spin } from "./components/uix/spin";
 export type { StepsItemProps, StepsProps } from "./components/uix/steps";
 export { Steps, StepsItem } from "./components/uix/steps";
 export type { SwitchProps } from "./components/uix/switch";
 export { Switch } from "./components/uix/switch";
+export type { TabsItem, TabsProps } from "./components/uix/tabs";
+export { Tabs } from "./components/uix/tabs";
 export type { TagsInputProps } from "./components/uix/tags-input";
 export { TagsInput } from "./components/uix/tags-input";
+export { Textarea } from "./components/uix/textarea";
 export type { TooltipProps } from "./components/uix/tooltip";
 export { Tooltip } from "./components/uix/tooltip";
 export type { TreeData, TreeProps } from "./components/uix/tree";
@@ -169,8 +153,8 @@ export { TreeTable } from "./components/uix/tree-table";
 export type { UploaderProps } from "./components/uix/uploader";
 export { Uploader } from "./components/uix/uploader";
 export type { HandleProps, UploadFile } from "./components/uix/uploader/type";
-export type { ValueFormatterProps } from "./components/uix/value-formatter";
-export { register, ValueFormatter } from "./components/uix/value-formatter";
+export type { Formatters, ValueFormatterProps } from "./components/uix/value-formatter";
+export { createFormatters, ValueFormatter } from "./components/uix/value-formatter";
 // custom hooks
 export * from "./hooks";
 // utils