[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

clsx/index.ts cn-utils/index.tsclsx/index.ts renamed to cn-utils/index.ts

@@ -59,5 +59,3 @@ export function cx() {
 export function cn(...inputs: ClassValue[]) {
   return twMerge(cx(inputs))
 }
-
-export default cn

index.ts

@@ -1,5 +1,5 @@
 export * from "./src"
-export * from "./clsx"
+export * from "./cn-utils"
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "./src/Accordion"
 export {
   AlertDialog,
@@ -14,12 +14,13 @@ export {
   AlertDialogAction,
   AlertDialogCancel,
 } from "./src/AlertDialog"
+export * from "./src/Add"
+export { AutoGrid, type AutoGridProps } from "./src/AutoGrid"
 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,24 +53,23 @@ 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 * from "./src/ExpansionsList"
 export { Separator } from "./src/Separator"
 export { Slider } from "./src/Slider"
+export {
+  OptionsPicker,
+  type OptionsPickerOption,
+  type OptionsPickerProps,
+} from "./src/OptionsPicker/OptionsPicker"
 export { Switch } from "./src/Switch"
 export {
   Table,
@@ -81,10 +81,23 @@ export {
   TableCell,
   TableCaption,
 } from "./src/Table"
-export { Tabs, TabsList, TabsTrigger, TabsContent } from "./src/Tabs"
+export {
+  SimpleTable,
+  type SimpleTableProps,
+  type SimpleTableRowData as SimpleTableRow,
+  type SimpleTableRowAction,
+  type SimpleTableLoadingState,
+} from "./src/SimpleTable"
+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 +107,20 @@ 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"
+export * from "./src/ShadowScrollBox"
+export * from "./src/SplitPane/SplitPane"
+export * from "./src/SplitPane/CollapsibleSplitPane"
+export * from "./src/SplitPane/CollapsedBar"
+export * from "./src/IconText"
+export * from "./src/TruncatedError"

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,9 @@
     "@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"
+    "focus-trap-react": "11.0.4",
+    "framer-motion": "9.0.1",
+    "react-day-picker": "9.3.0",
+    "recharts": "2.13.3"
   }
 }

src/Accordion.tsx

@@ -1,38 +1,47 @@
+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"
+import { cn } from "../cn-utils"
 
 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
+  variant?: "nav" | "default"
+}
+
 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, variant = "default", ...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",
+      {
+        "w-full justify-between self-start rounded py-2 pl-0 font-medium text-primary hover:bg-config-sidebar-hover data-[state=open]:font-semibold data-[state=open]:text-primary":
+          variant === "nav",
+      },
+      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 +51,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/Add.tsx

@@ -0,0 +1,59 @@
+import React from "react"
+
+import { cn } from "../cn-utils"
+import { PlusOutlined } from "@loft-enterprise/icons"
+
+export type AddProps = {
+  label: React.ReactNode
+  icon?: React.ReactNode
+  className?: string
+  disabled?: boolean
+  borderless?: boolean
+  onAddRequested?: (target: HTMLElement) => void
+}
+
+export function Add({ label, icon, onAddRequested, disabled, className, borderless }: AddProps) {
+  return (
+    <div
+      role="button"
+      onClick={(e) => {
+        e.stopPropagation()
+
+        if (!onAddRequested || disabled) {
+          return
+        }
+
+        onAddRequested(e.currentTarget)
+      }}
+      aria-disabled={disabled}
+      tabIndex={0}
+      onKeyDown={(e) => {
+        e.stopPropagation()
+
+        if (!onAddRequested || disabled) {
+          return
+        }
+
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault()
+          onAddRequested(e.currentTarget)
+        }
+      }}
+      className={cn(
+        "flex w-full cursor-pointer flex-row items-center rounded-md",
+        "justify-center border border-divider-main p-2.5 text-neutral-dark",
+        "select-none gap-1 text-xs font-semibold focus-visible:outline",
+        "transition-colors",
+        {
+          "!border-divider-light !text-neutral-main": disabled && !borderless,
+          "!border-none": borderless,
+          "!cursor-default text-disabledColor-main": disabled,
+          "hover:text-neutral-mid-light": !disabled,
+        },
+        className
+      )}>
+      {icon || <PlusOutlined className={"size-3 *:size-3"} />}
+      {label}
+    </div>
+  )
+}