@meta-1/design 0.0.159

package/src/assets/locales/zh-tw.ts

@@ -0,0 +1,74 @@
+import "dayjs/locale/zh-tw";
+import { zhTW } from "date-fns/locale";
+
+export default {
+  key: "zh-TW",
+  Alert: {
+    okText: "確定",
+    cancelText: "取消",
+  },
+  ComboSelect: {
+    empty: "暫無數據",
+    clearText: "清空",
+  },
+  DataTable: {
+    empty: "暫無數據",
+  },
+  Filters: {
+    searchText: "搜尋",
+    resetText: "重置",
+  },
+  Pagination: {
+    totalPage: "共 %total 條",
+    total: "%page 頁",
+    size: "%size 條/頁",
+    go: "前往",
+    goSuffix: "頁",
+  },
+  Tree: {
+    emptyText: "暫無數據",
+  },
+  TreeTable: {
+    emptyText: "暫無數據",
+  },
+  DateRangePicker: {
+    locale: zhTW,
+    format: "yyyy-MM-dd",
+  },
+  Uploader: {
+    placeholder: "請拖曳文件到此處或點擊選擇文件",
+    uploadText: "上傳",
+    maxFilesExceeded: "已達到最大文件數量限制",
+    partialFilesAdded: "，只能再添加 %count 個文件",
+  },
+  DatePicker: {
+    locale: zhTW,
+    format: "yyyy-MM-dd",
+    presetPlaceholder: "快速選擇",
+    options: [
+      {
+        label: "今天",
+        value: "0",
+      },
+      {
+        label: "明天",
+        value: "1",
+      },
+      {
+        label: "三天後",
+        value: "3",
+      },
+      {
+        label: "一周後",
+        value: "7",
+      },
+      {
+        label: "一月後",
+        value: "30",
+      },
+    ],
+  },
+  Empty: {
+    text: "暫無數據",
+  },
+};

package/src/assets/style/theme.css

@@ -0,0 +1,173 @@
+@import "tw-animate-css";
+@import "tailwindcss";
+@custom-variant dark (&:is(.dark *));
+
+@theme design {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-error: var(--error);
+  --color-error-foreground: var(--error-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-action-hover: var(--action-hover);
+}
+
+@layer base {
+  :root {
+    --background: hsl(0 0% 100%);
+    --foreground: hsl(0 0% 3.9%);
+    --card: hsl(0 0% 100%);
+    --card-foreground: hsl(0 0% 3.9%);
+    --popover: hsl(0 0% 100%);
+    --popover-foreground: hsl(0 0% 3.9%);
+    --primary: rgba(53, 104, 82, 1);
+    --primary-foreground: hsl(0 0% 98%);
+    --secondary: hsl(0 0% 96.1%);
+    --secondary-foreground: hsl(0 0% 9%);
+    --success: rgba(232, 255, 234, 1);
+    --success-foreground: rgba(0, 180, 42, 1);
+    --error: rgba(255, 236, 232, 1);
+    --error-foreground: rgba(245, 63, 63, 1);
+    --warning: rgba(255, 247, 232, 1);
+    --warning-foreground: rgba(255, 125, 0, 1);
+    --muted: hsl(0 0% 96.1%);
+    --muted-foreground: hsl(0 0% 45.1%);
+    --accent: hsl(0 0% 96.1%);
+    --accent-foreground: hsl(0 0% 9%);
+    --destructive: rgba(245, 63, 63, 1);
+    --destructive-foreground: rgba(250, 250, 250, 1);
+    --radius: 0.5rem;
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --chart-1: oklch(0.646 0.222 41.116);
+    --chart-2: oklch(0.6 0.118 184.704);
+    --chart-3: oklch(0.398 0.07 227.392);
+    --chart-4: oklch(0.828 0.189 84.429);
+    --chart-5: oklch(0.769 0.188 70.08);
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+    --action-hover: rgba(0, 0, 0, 0.08);
+  }
+
+  .dark {
+    --background: hsl(0 0% 7%);
+    --foreground: hsl(0 0% 98%);
+    --card: hsl(0 0% 3.9%);
+    --card-foreground: hsl(0 0% 98%);
+    --popover: hsl(0 0% 3.9%);
+    --popover-foreground: hsl(0 0% 98%);
+    --primary: rgba(68, 133, 105, 1);
+    --primary-foreground: rgba(255, 255, 255, 1);
+    --success: rgba(232, 255, 234, 1);
+    --success-foreground: rgba(0, 180, 42, 1);
+    --error: rgba(255, 236, 232, 1);
+    --error-foreground: rgba(245, 63, 63, 1);
+    --warning: rgba(255, 247, 232, 1);
+    --warning-foreground: rgba(255, 125, 0, 1);
+    --secondary: hsl(0 0% 14.9%);
+    --secondary-foreground: hsl(0 0% 98%);
+    --muted: hsl(0 0% 14.9%);
+    --muted-foreground: hsl(0 0% 63.9%);
+    --accent: hsl(0 0% 14.9%);
+    --accent-foreground: hsl(0 0% 98%);
+    --destructive: rgba(245, 63, 63, 1);
+    --destructive-foreground: rgba(250, 250, 250, 1);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
+    --action-hover: rgba(255, 255, 255, 0.08);
+  }
+
+  html {
+    @apply bg-background text-foreground;
+
+    *,
+    ::after,
+    ::before,
+    ::backdrop,
+    ::file-selector-button {
+      border-color: var(--border);
+    }
+
+    svg,
+    img {
+      display: inline-block;
+    }
+  }
+}
+
+@utility action-effect {
+  @apply hover:bg-[var(--action-hover)] hover:text-primary;
+  @apply focus:bg-[var(--action-hover)] focus:border-[var(--border)] focus:shadow-[0_0_0_1px_var(--card),0_0_0_3px_var(--primary)];
+  @apply dark:focus:border-[var(--sidebar-border)] dark:focus:shadow-[0_0_0_1px_var(--secondary),0_0_0_3px_var(--primary)];
+}
+
+@utility action-effect-active {
+  @apply active:bg-[var(--action-hover)] active:border-[var(--border)] active:shadow-[0_0_0_1px_var(--card),0_0_0_3px_var(--primary)];
+  @apply dark:active:border-[var(--sidebar-border)] dark:active:shadow-[0_0_0_1px_var(--secondary),0_0_0_3px_var(--primary)];
+}
+
+@utility action-active {
+  @apply text-primary bg-[var(--action-hover)] font-bold;
+}
+
+@utility action-effect-disabled {
+  @apply opacity-50 cursor-not-allowed focus:bg-transparent active:bg-transparent focus:shadow-none active:shadow-none focus:border-transparent active:border-transparent;
+  @apply hover:bg-transparent;
+}

package/src/components/icons/Empty.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+const SvgEmpty = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    className="empty_svg__svg_21efd88b67__icon"
+    height="1em"
+    viewBox="0 0 1485 1024"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="m1243.625 633.444-161.107-269.618c-3.034-6.358-8.38-10.26-14.593-10.26H401.248c-6.068 0-11.559 3.18-14.593 10.26L225.549 633.444c-1.59 1.59-1.59 3.179-1.59 6.357v329.87c0 10.26 6.069 16.617 16.183 16.617h989.756c9.97 0 16.183-6.357 16.183-16.616v-329.87c-.867-2.457-.867-4.046-2.456-6.358zM411.218 387.522h647.604l145.068 236.24H847.722c-9.97 0-16.183 6.359-16.183 16.617 0 54.762-43.78 99.843-96.663 99.843s-96.664-45.226-96.664-99.843c0-10.258-6.069-16.616-16.183-16.616H265.283l145.935-236.241zm801.775 566.256H256.18V657.14h351.4c8.38 65.02 62.852 116.603 127.295 116.603S854.513 722.161 862.17 657.14h351.544v296.493h-.722zM149.547 796.718v-18.206c0-4.769-3.901-8.67-8.38-8.67s-8.38 3.901-8.38 8.67v18.205h-17.629c-4.623 0-8.38 3.902-8.38 8.67s3.901 8.67 8.38 8.67h17.628v18.205c0 4.768 3.901 8.67 8.38 8.67 4.624 0 8.381-3.902 8.381-8.67v-18.206h17.628c4.624 0 8.38-3.901 8.38-8.67s-3.901-8.669-8.38-8.669h-17.628zm1157.075-360.792h26.875c6.936 0 13.004 6.358 13.004 13.438 0 7.947-5.346 13.437-13.004 13.437h-26.875v27.742c0 7.08-6.068 13.438-13.004 13.438s-13.004-5.49-13.004-13.438v-27.742h-26.875c-6.936 0-13.004-6.357-13.004-13.437 0-7.947 5.346-13.438 13.004-13.438h26.875v-27.742c0-7.08 6.069-13.438 13.004-13.438 7.658 0 13.004 5.491 13.004 13.438v27.742zm94.352 118.193h16.905c4.624 0 8.38 3.901 8.38 8.67s-3.9 8.669-8.38 8.669h-16.905v17.483c0 4.768-3.901 8.67-8.38 8.67-4.624 0-8.38-3.902-8.38-7.948V572.18h-16.906c-4.624 0-8.38-3.901-8.38-8.67s3.9-8.669 8.38-8.669h16.905v-18.205c0-4.769 3.902-8.67 8.38-8.67 4.624 0 8.381 3.901 8.381 8.67v17.483zM171.8 413.819v-27.742c0-7.947-6.07-13.438-13.005-13.438-7.658 0-13.004 6.358-13.004 13.438v27.02h-26.152c-7.658 0-13.004 6.357-13.004 13.437 0 7.947 6.068 13.438 13.004 13.438h26.152v27.02c0 7.946 6.069 13.437 13.004 13.437 7.658 0 13.005-6.358 13.005-13.438v-27.02h26.152c7.658 0 13.004-6.357 13.004-13.437 0-7.947-6.068-13.437-13.004-13.437 0 .722-26.152.722-26.152.722zM52.883 684.16C23.696 684.16 0 659.597 0 629.4s23.84-54.763 52.883-54.763c29.187 0 52.884 24.564 52.884 54.762.144 30.92-23.697 54.762-52.884 54.762zm0-27.019c14.594 0 26.153-11.848 26.153-27.02 0-15.026-11.56-27.02-26.153-27.02-14.593 0-26.152 11.85-26.152 27.02.144 15.172 11.559 27.02 26.152 27.02zm1407.91-151.425c-13.004 0-24.563-11.126-24.563-25.43 0-14.305 10.692-25.43 24.563-25.43 13.004 0 24.563 11.125 24.563 25.43 0 14.304-10.692 25.43-24.563 25.43zm0-11.848c6.936 0 12.282-5.491 12.282-12.716s-5.346-12.715-12.282-12.715-12.282 5.49-12.282 12.715c0 7.08 6.213 12.716 12.282 12.716zM393.591 94.93c10.692-11.126 28.32-11.126 39.156 0L531 195.64c10.693 11.125 10.693 29.33 0 40.457-10.692 11.125-28.32 11.125-39.156 0l-98.253-100.71c-10.693-11.126-10.693-29.331 0-40.457zm341.43-50.716c15.315 0 27.597 12.715 27.597 28.609v142.756c0 15.894-12.282 28.609-27.598 28.609-15.316 0-27.597-12.715-27.597-28.61V72.824c-.867-15.172 12.281-28.61 27.597-28.61-.722 0 0 0 0 0zm342.151 43.636c10.693 11.126 10.693 29.331 0 40.457l-97.386 100.71c-10.692 11.125-28.32 11.125-39.157 0-10.692-11.126-10.692-29.332 0-40.458l97.387-100.71c10.836-11.125 28.464-11.125 39.156 0z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default SvgEmpty;

package/src/components/icons/Spin.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+const SvgSpin = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    className="spin_svg__svg_f013ea9dcb__svg_a0d71e7da7__icon"
+    fill="currentColor"
+    height="1em"
+    viewBox="0 0 1024 1024"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M512 1024c-136.768 0-265.344-53.248-362.048-149.952S0 648.768 0 512c0-96.832 27.2-191.104 78.592-272.704a513.28 513.28 0 0 1 204.352-185.28l43.008 85.824a417.92 417.92 0 0 0-166.144 150.656A414.72 414.72 0 0 0 96 512c0 229.376 186.624 416 416 416s416-186.624 416-416c0-78.72-22.08-155.264-63.808-221.504A416.96 416.96 0 0 0 698.048 139.84l43.008-85.824a513.28 513.28 0 0 1 204.352 185.28A510.784 510.784 0 0 1 1024 512c0 136.768-53.248 265.344-149.952 362.048S648.768 1024 512 1024z" />
+  </svg>
+);
+export default SvgSpin;

package/src/components/icons/index.ts

@@ -0,0 +1,2 @@
+export { default as Empty } from "./Empty";
+export { default as Spin } from "./Spin";

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,111 @@
+import type * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { buttonVariants } from "@meta-1/design/components/ui/button";
+import { cn } from "@meta-1/design/lib/utils";
+
+function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+
+function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      className={cn(
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=open]:animate-in",
+        className,
+      )}
+      data-slot="alert-dialog-overlay"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        className={cn(
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-lg",
+          className,
+        )}
+        data-slot="alert-dialog-content"
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      data-slot="alert-dialog-header"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      data-slot="alert-dialog-footer"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      className={cn("font-semibold text-lg", className)}
+      data-slot="alert-dialog-title"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      className={cn("text-muted-foreground text-sm", className)}
+      data-slot="alert-dialog-description"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />;
+}
+
+function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return <AlertDialogPrimitive.Cancel className={cn(buttonVariants({ variant: "outline" }), className)} {...props} />;
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/src/components/ui/alert.tsx

@@ -0,0 +1,49 @@
+import type * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@meta-1/design/lib/utils";
+
+const alertVariants = cva(
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return <div className={cn(alertVariants({ variant }), className)} data-slot="alert" role="alert" {...props} />;
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
+      data-slot="alert-title"
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "col-start-2 grid justify-items-start gap-1 text-muted-foreground text-sm [&_p]:leading-relaxed",
+        className,
+      )}
+      data-slot="alert-description"
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription };

package/src/components/ui/avatar.tsx

@@ -0,0 +1,32 @@
+import type * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "@meta-1/design/lib/utils";
+
+function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      className={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
+      data-slot="avatar"
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image className={cn("aspect-square size-full", className)} data-slot="avatar-image" {...props} />
+  );
+}
+
+function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      className={cn("flex size-full items-center justify-center rounded-full bg-muted", className)}
+      data-slot="avatar-fallback"
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback };

package/src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import type * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@meta-1/design/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 font-medium text-xs transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
+
+  return <Comp className={cn(badgeVariants({ variant }), className)} data-slot="badge" {...props} />;
+}
+
+export { Badge, badgeVariants };

package/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,92 @@
+import type * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "@meta-1/design/lib/utils";
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 break-words text-muted-foreground text-sm sm:gap-2.5",
+        className,
+      )}
+      data-slot="breadcrumb-list"
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return <li className={cn("inline-flex items-center gap-1.5", className)} data-slot="breadcrumb-item" {...props} />;
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp className={cn("transition-colors hover:text-foreground", className)} data-slot="breadcrumb-link" {...props} />
+  );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-current="page"
+      aria-disabled="true"
+      className={cn("font-normal text-foreground", className)}
+      data-slot="breadcrumb-page"
+      role="link"
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

package/src/components/ui/button.tsx

@@ -0,0 +1,52 @@
+import type * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@meta-1/design/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return <Comp className={cn(buttonVariants({ variant, size, className }))} data-slot="button" {...props} />;
+}
+
+export { Button, buttonVariants };