@meta-1/design 0.0.159

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

@@ -0,0 +1,43 @@
+import type { ComponentProps, ReactNode } from "react";
+
+import { cn } from "@meta-1/design/lib";
+import { Alert as UIAlert, AlertDescription as UIAlertDescription, AlertTitle as UIAlertTitle } from "../../ui/alert";
+
+export type AlertProps = ComponentProps<typeof UIAlert> & {
+  title?: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  children?: ReactNode;
+  titleClassName?: string;
+  descriptionClassName?: string;
+};
+
+export const Alert = (props: AlertProps) => {
+  const {
+    title,
+    description,
+    icon,
+    children: childrenProp,
+    titleClassName,
+    descriptionClassName,
+    variant,
+    ...rest
+  } = props;
+
+  let className = props.className;
+  const children = childrenProp || description;
+
+  if (variant === "destructive") {
+    className = cn("border-destructive/20 bg-destructive/10 text-destructive", className);
+  }
+
+  return (
+    <UIAlert {...rest} className={cn("flex gap-2", className)} variant={variant}>
+      {icon}
+      <div className="flex flex-1 flex-col gap-2">
+        {title && <UIAlertTitle className={titleClassName}>{title}</UIAlertTitle>}
+        {children && <UIAlertDescription className={descriptionClassName}>{children}</UIAlertDescription>}
+      </div>
+    </UIAlert>
+  );
+};

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

@@ -0,0 +1,109 @@
+import { type FC, type ReactNode, useContext, useMemo, useState } from "react";
+import get from "lodash/get";
+
+import { render as ReactDOMRender } from "@meta-1/design/lib";
+import {
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialog as UIAlertDialog,
+} from "../../ui/alert-dialog";
+import { Button } from "../button";
+import { UIXContext } from "../config-provider";
+
+export interface ConfirmProps {
+  title: ReactNode;
+  description: ReactNode;
+  cancelText?: string;
+  okText?: string;
+  // biome-ignore lint/suspicious/noConfusingVoidType: <onOk>
+  onOk?: () => boolean | void | Promise<boolean | void>;
+  onCancel?: () => void;
+  open?: boolean;
+  confirmLoading?: boolean;
+}
+
+const AlertDialog: FC<ConfirmProps> = (props) => {
+  const { description, title, onOk, onCancel } = props;
+
+  const config = useContext(UIXContext);
+  const okText = props.okText || get(config.locale, "Alert.okText");
+  const cancelText = props.cancelText || get(config.locale, "Alert.cancelText");
+
+  const [open, setOpen] = useState(props.open);
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <UIAlertDialog {...props} open={open}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <Button
+            onClick={() => {
+              setOpen(false);
+              onCancel?.();
+            }}
+            variant="outline"
+          >
+            {cancelText}
+          </Button>
+          <Button
+            loading={loading}
+            onClick={async () => {
+              setLoading(true);
+              const result = onOk?.();
+              let value: boolean | undefined;
+              if (result instanceof Promise) {
+                value = (await result) as boolean | undefined;
+                if (typeof value === "undefined") {
+                  value = true;
+                }
+              } else if (typeof result === "undefined") {
+                value = true;
+              } else {
+                value = result;
+              }
+              setLoading(false);
+              if (value) {
+                setOpen(false);
+              }
+            }}
+          >
+            {okText}
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </UIAlertDialog>
+  );
+};
+
+export const useAlert = () => {
+  return useMemo(() => {
+    return {
+      confirm: (props: ConfirmProps) => {
+        // biome-ignore lint/suspicious/noExplicitAny: <root>
+        let root: any;
+        const div = document.createElement("div");
+        document.body.appendChild(div);
+        const close = () => {
+          setTimeout(() => {
+            root = root?._unmount();
+            if (div.parentNode) {
+              div.parentNode.removeChild(div);
+            }
+          }, 200);
+        };
+        const onCancel = () => {
+          close();
+          props.onCancel?.();
+        };
+        root = ReactDOMRender(<AlertDialog {...props} onCancel={onCancel} open={true} />, div);
+      },
+    };
+  }, []);
+};

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

@@ -0,0 +1,25 @@
+import type * as React from "react";
+import { useMemo } from "react";
+
+import { AvatarFallback, AvatarImage, Avatar as UIAvatar } from "@meta-1/design/components/ui/avatar";
+
+export interface AvatarProps extends React.PropsWithChildren {
+  src?: string;
+  fallback?: string;
+  alt?: string;
+  className?: string;
+  fallbackClassName?: string;
+}
+
+export const Avatar: React.FC<AvatarProps> = (props) => {
+  const { fallback } = props;
+  const fall = useMemo(() => {
+    return fallback?.charAt(0).toUpperCase();
+  }, [fallback]);
+  return (
+    <UIAvatar className={props.className}>
+      <AvatarImage alt={props.alt} src={props.src} />
+      <AvatarFallback className={props.fallbackClassName}>{fall}</AvatarFallback>
+    </UIAvatar>
+  );
+};

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

@@ -0,0 +1,38 @@
+import { Children, cloneElement, type FC, type PropsWithChildren, type ReactElement } from "react";
+
+import { cn } from "@meta-1/design/lib";
+
+export interface BreadcrumbsItemProps extends PropsWithChildren {
+  last?: boolean;
+}
+
+export const BreadcrumbsItem: FC<BreadcrumbsItemProps> = (props) => {
+  const { last = false } = props;
+  return (
+    <div className="text-muted-foreground">
+      {props.children}
+      {last ? null : <span className="mx-2">/</span>}
+    </div>
+  );
+};
+
+export interface BreadcrumbsProps extends PropsWithChildren {
+  className?: string;
+}
+
+export const Breadcrumbs: FC<BreadcrumbsProps> = (props) => {
+  const { children, className } = props;
+
+  const size = Children.count(children);
+
+  return (
+    <div className={cn("my-2 flex items-center justify-start", className)}>
+      {Children.map(children, (child, index) => {
+        const ele = child as ReactElement;
+        if (!ele) return null;
+        // biome-ignore lint/suspicious/noExplicitAny: <cloneElement>
+        return cloneElement<any>(ele, { ...(ele as any).props, last: index === size - 1 });
+      })}
+    </div>
+  );
+};

package/src/components/uix/broadcast-channel-context/index.tsx

@@ -0,0 +1,28 @@
+import { createContext, type FC, type PropsWithChildren, useContext, useEffect, useState } from "react";
+
+export const BroadcastChannelContext = createContext<BroadcastChannel | null>(null);
+
+export type BroadcastChannelProviderProps = PropsWithChildren<{
+  channelName: string;
+  onMessage: ((this: BroadcastChannel, ev: MessageEvent) => unknown) | null;
+}>;
+
+export const BroadcastChannelProvider: FC<BroadcastChannelProviderProps> = (props) => {
+  const { channelName, onMessage } = props;
+  const [channel, setChannel] = useState<BroadcastChannel | null>(null);
+
+  useEffect(() => {
+    if (typeof BroadcastChannel === "undefined") {
+      return;
+    }
+    const channel = new BroadcastChannel(channelName);
+    channel.onmessage = onMessage;
+    setChannel(channel);
+  }, [channelName, onMessage]);
+
+  return <BroadcastChannelContext.Provider value={channel}>{props.children}</BroadcastChannelContext.Provider>;
+};
+
+export const useBroadcastChannel = () => {
+  return useContext(BroadcastChannelContext);
+};

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

@@ -0,0 +1,29 @@
+import { forwardRef } from "react";
+
+import { Button as UIButton } from "@meta-1/design/components/ui/button";
+import { Spin } from "@meta-1/design/components/uix/spin";
+import { cn } from "@meta-1/design/lib";
+
+export interface ButtonProps extends React.ComponentProps<typeof UIButton> {
+  loading?: boolean;
+  long?: boolean;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {
+  const { loading = false, long = false, disabled = false, className, ...rest } = props;
+  const elementRef = forwardedRef;
+
+  return (
+    <UIButton
+      {...rest}
+      className={cn("gap-0.5", className, long ? "w-full" : null)}
+      disabled={loading || disabled}
+      ref={elementRef}
+    >
+      {loading ? <Spin /> : null}
+      {props.children}
+    </UIButton>
+  );
+});
+
+Button.displayName = "Button";

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

@@ -0,0 +1,32 @@
+import type { FC, PropsWithChildren, ReactNode } from "react";
+import classNames from "classnames";
+
+import { cn } from "@meta-1/design/lib";
+import { CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Card as UICard } from "../../ui/card";
+
+export interface CardProps extends PropsWithChildren {
+  footer?: ReactNode;
+  title?: ReactNode;
+  description?: ReactNode;
+  className?: string;
+  contentClassName?: string;
+  onClick?: () => void;
+  shadow?: boolean;
+}
+
+export const Card: FC<CardProps> = (props) => {
+  const { title = "", description = "", className, contentClassName, footer, shadow = false } = props;
+
+  return (
+    <UICard className={classNames(shadow ? null : "shadow-none", className)} onClick={props.onClick}>
+      {title || description ? (
+        <CardHeader className="pb-0">
+          {title ? <CardTitle>{title}</CardTitle> : null}
+          {description ? <CardDescription>{description}</CardDescription> : null}
+        </CardHeader>
+      ) : null}
+      <CardContent className={cn("px-6", contentClassName)}>{props.children}</CardContent>
+      {footer ? <CardFooter>{footer}</CardFooter> : null}
+    </UICard>
+  );
+};

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

@@ -0,0 +1,79 @@
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  forwardRef,
+  type ReactNode,
+  useCallback,
+  useId,
+  useMemo,
+} from "react";
+import type * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { MinusIcon } from "@radix-ui/react-icons";
+import classNames from "classnames";
+
+import { Checkbox as UICheckbox } from "@meta-1/design/components/ui/checkbox";
+import { cn } from "@meta-1/design/lib";
+
+export type CheckboxProps = Omit<ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "onChange" | "value"> & {
+  indeterminate?: boolean;
+  label?: ReactNode;
+  field?: boolean;
+  value?: boolean;
+  onChange?: (value: boolean) => void;
+  children?: ReactNode;
+};
+
+export const Checkbox = forwardRef<ComponentRef<typeof UICheckbox>, CheckboxProps>((props, forwardedRef) => {
+  const { value, checked, field = false, onCheckedChange, onChange, indeterminate, label, children, ...rest } = props;
+  const elementRef = forwardedRef;
+
+  const v = useMemo(() => (field ? value : checked), [value, checked, field]);
+  const handleChange = useCallback(
+    (checked: boolean) => {
+      if (field) {
+        onChange?.(checked);
+      } else {
+        onCheckedChange?.(checked);
+      }
+    },
+    [field, onCheckedChange, onChange],
+  );
+
+  const content = useMemo(() => children || label, [children, label]);
+
+  const autoId = useId();
+  const id = props.id ?? autoId;
+
+  const checkbox = (
+    <UICheckbox
+      {...rest}
+      checked={v}
+      className={cn(
+        indeterminate && "border-primary bg-primary text-primary-foreground",
+        indeterminate && "flex items-center justify-center",
+        !content && props.className,
+      )}
+      id={id}
+      onCheckedChange={(checked) => handleChange(checked as boolean)}
+      ref={elementRef}
+    >
+      {indeterminate && <MinusIcon className="size-3.5" />}
+    </UICheckbox>
+  );
+  if (!content) return checkbox;
+  return (
+    <label
+      className={classNames(
+        "inline-flex items-center justify-start space-x-1",
+        "font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        props.className,
+      )}
+      htmlFor={id}
+    >
+      {checkbox}
+      <span>{content}</span>
+    </label>
+  );
+});
+
+Checkbox.displayName = "Checkbox";

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

@@ -0,0 +1,60 @@
+import { type FC, forwardRef, type ReactNode, useState } from "react";
+import classNames from "classnames";
+import remove from "lodash/remove";
+
+import { Checkbox } from "@meta-1/design/components/uix/checkbox";
+
+export interface CheckboxGroupOptionProps {
+  label: ReactNode;
+  value: string;
+  disabled?: boolean;
+}
+
+export interface CheckboxGroupProps {
+  options?: CheckboxGroupOptionProps[];
+  value?: string[];
+  onChange?: (value: string[]) => void;
+  itemClassName?: string;
+  checkboxClassName?: string;
+  className?: string;
+}
+
+export const CheckboxGroup: FC<CheckboxGroupProps> = forwardRef((props, _ref) => {
+  const { options = [], itemClassName, className, checkboxClassName } = props;
+
+  const [checkedValues, setCheckedValues] = useState<string[]>(props.value || []);
+
+  const onCheckedChange = (value: string, checked: boolean) => {
+    if (checked) {
+      checkedValues.push(value);
+    } else {
+      remove(checkedValues, (v) => v === value);
+    }
+    setCheckedValues([...checkedValues]);
+    props.onChange?.([...checkedValues]);
+  };
+
+  return (
+    <div className={classNames("-m-2 flex flex-wrap items-center justify-start space-x-2 space-y-2", className)}>
+      <span />
+      {options.map((option) => {
+        const id = `checkbox-group-${option.value}`;
+        return (
+          <label
+            className={classNames("flex items-center justify-start", "ml-1 space-x-1", itemClassName)}
+            htmlFor={id}
+            key={option.value}
+          >
+            <Checkbox
+              checked={checkedValues.includes(option.value)}
+              className={checkboxClassName}
+              id={id}
+              onCheckedChange={(checked: boolean) => onCheckedChange(option.value, checked)}
+            />
+            <span>{option.label}</span>
+          </label>
+        );
+      })}
+    </div>
+  );
+});