[skip ci] repo-sync

Author: loft-bot

.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "react/prop-types": "off"
+  }
+}

.gitignore

@@ -1,2 +1,3 @@
-node_modules
-.DS_Store
+node_modules/
+lib/
+yarn-error.log

index.ts

@@ -15,11 +15,10 @@ export {
   AlertDialogCancel,
 } from "./src/AlertDialog"
 export { Avatar, AvatarImage, AvatarFallback } from "./src/Avatar"
-export { Button } from "./src/Button"
+export { Button, getButtonClasses } from "./src/Button"
 export type { ButtonProps } from "./src/Button"
 export { Checkbox } from "./src/Checkbox"
 export { Chip } from "./src/Chip"
-export { Collapsible, CollapsibleTrigger, CollapsibleContent } from "./src/Collapsible"
 
 export {
   Dialog,
@@ -52,22 +51,15 @@ export {
 } from "./src/DropdownMenu"
 export { HoverCard, HoverCardTrigger, HoverCardContent } from "./src/HoverCard"
 export { IconButton } from "./src/IconButton"
-export { Input } from "./src/Input"
+export { Input, type InputProps } from "./src/Input"
 export { Label } from "./src/Label"
 export { Popover, PopoverContent, PopoverRoot, PopoverTrigger, PopoverPortal } from "./src/Popover"
-export { Progress } from "./src/Progress"
-export { RadioGroup, RadioGroupItem } from "./src/RadioGroup"
+export { RichTooltip, type RichTooltipProps, type RichTooltipAction } from "./src/RichTooltip"
+export { Progress, ProgressVariant } from "./src/Progress"
+export { RadioGroup, RadioGroupItem, LabeledRadioGroupItem } from "./src/RadioGroup"
 export { ScrollArea, ScrollBar } from "./src/ScrollArea"
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-} from "./src/Select"
+export * from "./src/Select"
+export * from "./src/Autocomplete"
 export { Separator } from "./src/Separator"
 export { Slider } from "./src/Slider"
 export { Switch } from "./src/Switch"
@@ -81,10 +73,16 @@ export {
   TableCell,
   TableCaption,
 } from "./src/Table"
-export { Tabs, TabsList, TabsTrigger, TabsContent } from "./src/Tabs"
+export * from "./src/Tabs"
 export { Toggle } from "./src/Toggle"
 export { ToggleGroup, ToggleGroupItem } from "./src/ToggleGroup"
-
+export {
+  ModalDialog,
+  type ModalProps,
+  type ModalDialogInstance,
+  type ModalAction,
+  type SecondaryModalAction,
+} from "./src/ModalDialog"
 export { DropdownButton } from "./src/DropdownButton"
 export {
   Tooltip,
@@ -94,9 +92,14 @@ export {
   TooltipRoot,
   TooltipPortal,
 } from "./src/Tooltip"
-export { DataTable, DataTableRowContext } from "./src/DataTable"
+export { Count, type CountProps, CountSize, CountTheme } from "./src/Count"
+export * from "./src/DataTable"
 export { FixedText } from "./src/FixedText"
 export { Slot } from "@radix-ui/react-slot"
 export * from "./src/index"
-export { Select as EnchangedSelect, SelectVariant } from "./src/Select/Select"
 export { CodeExample } from "./src/CodeExample"
+export { SegmentedToggle, type SegmentedToggleProps, type SegmentItem } from "./src/SegmentedToggle"
+export * from "./src/DataTable/components"
+export * from "./src/SkeletonWrapper"
+export { Loading } from "./src/Loading"
+export * from "./src/Toast"

package.json

@@ -5,8 +5,6 @@
   "main": "index.ts",
   "peerDependencies": {
     "@loft-enterprise/client": "0.1.0",
-    "@loft-enterprise/icons": "*",
-    "framer-motion": "9.0.1",
     "tailwindcss": "3.4.0"
   },
   "dependencies": {
@@ -37,6 +35,8 @@
     "@radix-ui/react-toggle-group": "1.0.4",
     "@radix-ui/react-toolbar": "1.0.4",
     "@radix-ui/react-tooltip": "1.0.7",
-    "react-select": "^5.8.0"
+    "framer-motion": "9.0.1",
+    "react-day-picker": "9.3.0",
+    "recharts": "2.13.3"
   }
 }

src/Accordion.tsx

@@ -1,38 +1,42 @@
+import DownOutlined from "@ant-design/icons/DownOutlined"
 import * as AccordionPrimitive from "@radix-ui/react-accordion"
 import * as React from "react"
 
 import cn from "../clsx"
-import { DownOutlined } from "@loft-enterprise/icons"
 
 const Accordion = AccordionPrimitive.Root
 
 const AccordionItem = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
 >(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item ref={ref} className={className} {...props} />
+  <AccordionPrimitive.Item ref={ref} className={cn("group/accordion", className)} {...props} />
 ))
 AccordionItem.displayName = "AccordionItem"
 
+type TAccordionTriggerProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
+  customTrigger?: React.ReactNode
+}
+
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header>
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "group/accordion flex cursor-pointer items-center justify-between bg-transparent p-2 transition-all [&[aria-expanded=true]>svg]:rotate-180",
-        className
-      )}
-      {...props}>
-      {children}
+  TAccordionTriggerProps
+>(({ className, children, customTrigger, ...props }, ref) => (
+  <AccordionPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "group/accordion flex cursor-pointer items-center justify-between bg-transparent p-2 transition-all [&[aria-expanded=true]>svg]:rotate-180",
+      className
+    )}
+    {...props}>
+    {children}
+    {customTrigger ?? (
       <DownOutlined
         className="transition-transform 
-      duration-200 ease-in-out *:size-3 group-aria-[expanded=true]/accordion:rotate-180"
+        duration-200 ease-in-out *:size-3 group-aria-[expanded=true]/accordion:rotate-180"
       />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
+    )}
+  </AccordionPrimitive.Trigger>
 ))
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
 
@@ -42,7 +46,7 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className="overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    className="w-full overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     {...props}>
     <div className={cn("", className)}>{children}</div>
   </AccordionPrimitive.Content>

src/Alert.tsx

@@ -1,25 +1,57 @@
+import BulbOutlined from "@ant-design/icons/BulbOutlined"
+import ExclamationCircleFilled from "@ant-design/icons/ExclamationCircleFilled"
+import InfoCircleOutlined from "@ant-design/icons/InfoCircleOutlined"
+import WarningOutlined from "@ant-design/icons/WarningOutlined"
 import React from "react"
 
 import cn from "../clsx"
-import { Button, ButtonProps } from "./Button"
-import {
-  BulbOutlined,
-  ExclamationCircleFilled,
-  InfoCircleOutlined,
-  WarningOutlined,
-} from "@loft-enterprise/icons"
+import { Button, ButtonProps, ButtonStyles } from "./Button"
 
-type Props = {
+type AlertVariant = "info" | "warning" | "error" | "blank" | "neutral" | "danger"
+
+type AlertBoxProps = {
   title?: string
-  text: string
-  buttonText?: string
-  onButtonClick?: () => Promise<void>
-  linkText?: string
-  linkUrl?: string
-  variant?: "info" | "warning" | "error" | "blank"
+  variant?: AlertVariant
   className?: string
   children?: React.ReactNode
+  role?: string
+}
+
+export type AlertProps = AlertBoxProps & {
+  text?: string | React.ReactNode
+  buttonText?: React.ReactNode
+  buttonStyles?: ButtonStyles
+  onButtonClick?: () => void | Promise<void>
+  linkText?: React.ReactNode
+  linkUrl?: string
+  linkHideUnderline?: boolean
   icon?: React.ReactNode
+  hideIcon?: boolean
+  textClassName?: string
+  contentClassName?: string
+  iconWrapperClassName?: string
+}
+
+function AlertBox({ title, variant, className, children, role }: AlertBoxProps) {
+  return (
+    <div
+      role={role}
+      className={cn(
+        "rounded-md border px-3 py-3",
+        {
+          "border-primary-light bg-primary-extra-light": variant === "info",
+          "border-warning-light bg-warning-extra-light": variant === "warning",
+          "border-error-light bg-error-extra-light": variant === "error",
+          "border-neutral-light bg-neutral-extra-light": variant === "neutral",
+          "border-neutral-light": variant === "blank",
+          "border-danger-light bg-danger-extra-light": variant === "danger",
+          "flex flex-col gap-2": title,
+        },
+        className
+      )}>
+      {children}
+    </div>
+  )
 }
 
 function Alert({
@@ -32,47 +64,89 @@ function Alert({
   variant = "info",
   className,
   children,
+  buttonStyles,
+  linkHideUnderline,
   icon: Icon,
-}: Props) {
+  hideIcon = false,
+  textClassName,
+  contentClassName,
+  iconWrapperClassName,
+}: AlertProps) {
   const icon = {
     info: <InfoCircleOutlined />,
+    neutral: <InfoCircleOutlined />,
     warning: <WarningOutlined />,
     error: <ExclamationCircleFilled />,
     blank: <BulbOutlined />,
+    danger: <WarningOutlined />,
   }
 
   const buttonChild = React.Children.toArray(children).find(
     (child) => React.isValidElement(child) && (child.type as any)?.name === "AlertButton"
   ) as React.ReactElement | undefined
 
+  const contentChildren = React.Children.toArray(children).filter(
+    (child) => !React.isValidElement(child) || (child.type as any)?.name !== "AlertButton"
+  )
+
+  const getRole = (variant: AlertVariant): string => {
+    switch (variant) {
+      case "error":
+      case "danger":
+        return "alert"
+      case "info":
+      case "warning":
+      case "neutral":
+      case "blank":
+      default:
+        return "note"
+    }
+  }
+
   return (
-    <div
-      className={cn("rounded-md border px-3 py-3", className, {
-        "border-primary-light bg-primary-extra-light": variant === "info",
-        "border-warning-light bg-warning-extra-light": variant === "warning",
-        "border-error-light bg-error-extra-light": variant === "error",
-        "border-neutral-light": variant === "blank",
-        "flex flex-col gap-2": title,
-      })}>
-      <span className="flex flex-row items-center gap-2 [&_svg]:size-4">
-        {Icon ? Icon : icon[variant]}
-        {title ? <span className="font-bold">{title}</span> : <span>{text}</span>}
-      </span>
-      {title && <span className="text-primary-main text-sm">{text}</span>}
-      <div className="flex flex-row items-center gap-2">
-        {buttonText && !buttonChild && (
-          <Button className="self-start" size="small" onClickAsync={onButtonClick}>
-            {buttonText}
-          </Button>
-        )}
-        {buttonChild}
-        {linkText && linkUrl && (
-          <a href={linkUrl} rel="noreferrer" target="_blank" className="text-xs underline">
-            <span className="text-primary-main">{linkText}</span>
-          </a>
+    <AlertBox className={className} title={title} variant={variant} role={getRole(variant)}>
+      <div className={cn("flex flex-row items-center gap-2 [&_svg]:size-4", contentClassName)}>
+        {!hideIcon && <div className={iconWrapperClassName}>{Icon ? Icon : icon[variant]}</div>}
+        {title ? (
+          <span className="text-sm font-semibold">{title}</span>
+        ) : (
+          <span className={cn("text-sm", textClassName)}>{text}</span>
         )}
       </div>
-    </div>
+      {title &&
+        (contentChildren.length > 0 ? (
+          <span className="text-primary-main text-sm">{contentChildren}</span>
+        ) : (
+          text && (
+            <span className={cn("text-primary-main whitespace-pre-wrap text-sm", textClassName)}>
+              {text}
+            </span>
+          )
+        ))}
+      {!!(buttonText || buttonChild || linkText) && (
+        <div className="flex flex-row items-center gap-2">
+          {buttonText && !buttonChild && (
+            <Button
+              {...buttonStyles}
+              className="self-start"
+              size="small"
+              onClickAsync={onButtonClick}>
+              {buttonText}
+            </Button>
+          )}
+          {buttonChild}
+          {linkText && linkUrl && (
+            <a
+              href={linkUrl}
+              rel="noreferrer"
+              target="_blank"
+              className={cn("text-xs", { underline: !linkHideUnderline })}>
+              <span className="text-primary-main">{linkText}</span>
+            </a>
+          )}
+        </div>
+      )}
+    </AlertBox>
   )
 }
 
@@ -82,6 +156,8 @@ function AlertButton({ children, ...props }: ButtonProps) {
 
 AlertButton.displayName = "AlertButton"
 
+Alert.Box = AlertBox
+
 Alert.Button = AlertButton
 
-export { Alert }
+export { Alert, AlertBox }