) => {
if (event.key === "ArrowLeft") {
- event.preventDefault()
- scrollPrev()
+ event.preventDefault();
+ scrollPrev();
} else if (event.key === "ArrowRight") {
- event.preventDefault()
- scrollNext()
+ event.preventDefault();
+ scrollNext();
}
},
- [scrollPrev, scrollNext]
- )
+ [scrollPrev, scrollNext],
+ );
React.useEffect(() => {
- if (!api || !setApi) return
- setApi(api)
- }, [api, setApi])
+ if (!api || !setApi) return;
+ setApi(api);
+ }, [api, setApi]);
React.useEffect(() => {
- if (!api) return
- onSelect(api)
- api.on("reInit", onSelect)
- api.on("select", onSelect)
+ if (!api) return;
+ onSelect(api);
+ api.on("reInit", onSelect);
+ api.on("select", onSelect);
return () => {
- api?.off("select", onSelect)
- }
- }, [api, onSelect])
+ api?.off("select", onSelect);
+ };
+ }, [api, onSelect]);
return (
- )
+ );
}
function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
- const { carouselRef, orientation } = useCarousel()
+ const { carouselRef, orientation } = useCarousel();
return (
) {
className={cn(
"flex",
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
- const { orientation } = useCarousel()
+ const { orientation } = useCarousel();
return (
) {
className={cn(
"min-w-0 shrink-0 grow-0 basis-full",
orientation === "horizontal" ? "pl-4" : "pt-4",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
function CarouselPrevious({
@@ -177,7 +177,7 @@ function CarouselPrevious({
size = "icon",
...props
}: React.ComponentProps) {
- const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+ const { orientation, scrollPrev, canScrollPrev } = useCarousel();
return (
Previous slide
- )
+ );
}
function CarouselNext({
@@ -207,7 +207,7 @@ function CarouselNext({
size = "icon",
...props
}: React.ComponentProps) {
- const { orientation, scrollNext, canScrollNext } = useCarousel()
+ const { orientation, scrollNext, canScrollNext } = useCarousel();
return (
Next slide
- )
+ );
}
export {
@@ -238,4 +238,4 @@ export {
CarouselItem,
CarouselPrevious,
CarouselNext,
-}
+};
diff --git a/packages/ui/src/components/chart.tsx b/packages/ui/src/components/chart.tsx
index b99516f..bc7d7aa 100644
--- a/packages/ui/src/components/chart.tsx
+++ b/packages/ui/src/components/chart.tsx
@@ -1,37 +1,37 @@
-"use client"
+"use client";
-import * as React from "react"
-import * as RechartsPrimitive from "recharts"
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
-import { cn } from "@workspace/ui/lib/utils"
+import { cn } from "@workspace/ui/lib/utils";
// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
+const THEMES = { light: "", dark: ".dark" } as const;
export type ChartConfig = {
[k in string]: {
- label?: React.ReactNode
- icon?: React.ComponentType
+ label?: React.ReactNode;
+ icon?: React.ComponentType;
} & (
| { color?: string; theme?: never }
| { color?: never; theme: Record }
- )
-}
+ );
+};
type ChartContextProps = {
- config: ChartConfig
-}
+ config: ChartConfig;
+};
-const ChartContext = React.createContext(null)
+const ChartContext = React.createContext(null);
function useChart() {
- const context = React.useContext(ChartContext)
+ const context = React.useContext(ChartContext);
if (!context) {
- throw new Error("useChart must be used within a ")
+ throw new Error("useChart must be used within a ");
}
- return context
+ return context;
}
function ChartContainer({
@@ -41,13 +41,13 @@ function ChartContainer({
config,
...props
}: React.ComponentProps<"div"> & {
- config: ChartConfig
+ config: ChartConfig;
children: React.ComponentProps<
typeof RechartsPrimitive.ResponsiveContainer
- >["children"]
+ >["children"];
}) {
- const uniqueId = React.useId()
- const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+ const uniqueId = React.useId();
+ const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
return (
@@ -56,7 +56,7 @@ function ChartContainer({
data-chart={chartId}
className={cn(
"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
- className
+ className,
)}
{...props}
>
@@ -66,16 +66,16 @@ function ChartContainer({
- )
+ );
}
const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
const colorConfig = Object.entries(config).filter(
- ([, config]) => config.theme || config.color
- )
+ ([, config]) => config.theme || config.color,
+ );
if (!colorConfig.length) {
- return null
+ return null;
}
return (
@@ -89,20 +89,20 @@ ${colorConfig
.map(([key, itemConfig]) => {
const color =
itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
- itemConfig.color
- return color ? ` --color-${key}: ${color};` : null
+ itemConfig.color;
+ return color ? ` --color-${key}: ${color};` : null;
})
.join("\n")}
}
-`
+`,
)
.join("\n"),
}}
/>
- )
-}
+ );
+};
-const ChartTooltip = RechartsPrimitive.Tooltip
+const ChartTooltip = RechartsPrimitive.Tooltip;
function ChartTooltipContent({
active,
@@ -120,40 +120,40 @@ function ChartTooltipContent({
labelKey,
}: React.ComponentProps &
React.ComponentProps<"div"> & {
- hideLabel?: boolean
- hideIndicator?: boolean
- indicator?: "line" | "dot" | "dashed"
- nameKey?: string
- labelKey?: string
+ hideLabel?: boolean;
+ hideIndicator?: boolean;
+ indicator?: "line" | "dot" | "dashed";
+ nameKey?: string;
+ labelKey?: string;
}) {
- const { config } = useChart()
+ const { config } = useChart();
const tooltipLabel = React.useMemo(() => {
if (hideLabel || !payload?.length) {
- return null
+ return null;
}
- const [item] = payload
- const key = `${labelKey || item?.dataKey || item?.name || "value"}`
- const itemConfig = getPayloadConfigFromPayload(config, item, key)
+ const [item] = payload;
+ const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+ const itemConfig = getPayloadConfigFromPayload(config, item, key);
const value =
!labelKey && typeof label === "string"
? config[label as keyof typeof config]?.label || label
- : itemConfig?.label
+ : itemConfig?.label;
if (labelFormatter) {
return (
{labelFormatter(value, payload)}
- )
+ );
}
if (!value) {
- return null
+ return null;
}
- return {value}
+ return {value}
;
}, [
label,
labelFormatter,
@@ -162,34 +162,34 @@ function ChartTooltipContent({
labelClassName,
config,
labelKey,
- ])
+ ]);
if (!active || !payload?.length) {
- return null
+ return null;
}
- const nestLabel = payload.length === 1 && indicator !== "dot"
+ const nestLabel = payload.length === 1 && indicator !== "dot";
return (
{!nestLabel ? tooltipLabel : null}
{payload.map((item, index) => {
- const key = `${nameKey || item.name || item.dataKey || "value"}`
- const itemConfig = getPayloadConfigFromPayload(config, item, key)
- const indicatorColor = color || item.payload.fill || item.color
+ const key = `${nameKey || item.name || item.dataKey || "value"}`;
+ const itemConfig = getPayloadConfigFromPayload(config, item, key);
+ const indicatorColor = color || item.payload.fill || item.color;
return (
svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
- indicator === "dot" && "items-center"
+ indicator === "dot" && "items-center",
)}
>
{formatter && item?.value !== undefined && item.name ? (
@@ -209,7 +209,7 @@ function ChartTooltipContent({
"w-0 border-[1.5px] border-dashed bg-transparent":
indicator === "dashed",
"my-0.5": nestLabel && indicator === "dashed",
- }
+ },
)}
style={
{
@@ -223,7 +223,7 @@ function ChartTooltipContent({
@@ -241,14 +241,14 @@ function ChartTooltipContent({
>
)}
- )
+ );
})}
- )
+ );
}
-const ChartLegend = RechartsPrimitive.Legend
+const ChartLegend = RechartsPrimitive.Legend;
function ChartLegendContent({
className,
@@ -258,13 +258,13 @@ function ChartLegendContent({
nameKey,
}: React.ComponentProps<"div"> &
Pick
& {
- hideIcon?: boolean
- nameKey?: string
+ hideIcon?: boolean;
+ nameKey?: string;
}) {
- const { config } = useChart()
+ const { config } = useChart();
if (!payload?.length) {
- return null
+ return null;
}
return (
@@ -272,18 +272,18 @@ function ChartLegendContent({
className={cn(
"flex items-center justify-center gap-4",
verticalAlign === "top" ? "pb-3" : "pt-3",
- className
+ className,
)}
>
{payload.map((item) => {
- const key = `${nameKey || item.dataKey || "value"}`
- const itemConfig = getPayloadConfigFromPayload(config, item, key)
+ const key = `${nameKey || item.dataKey || "value"}`;
+ const itemConfig = getPayloadConfigFromPayload(config, item, key);
return (
svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+ "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
)}
>
{itemConfig?.icon && !hideIcon ? (
@@ -298,20 +298,20 @@ function ChartLegendContent({
)}
{itemConfig?.label}
- )
+ );
})}
- )
+ );
}
// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
config: ChartConfig,
payload: unknown,
- key: string
+ key: string,
) {
if (typeof payload !== "object" || payload === null) {
- return undefined
+ return undefined;
}
const payloadPayload =
@@ -319,15 +319,15 @@ function getPayloadConfigFromPayload(
typeof payload.payload === "object" &&
payload.payload !== null
? payload.payload
- : undefined
+ : undefined;
- let configLabelKey: string = key
+ let configLabelKey: string = key;
if (
key in payload &&
typeof payload[key as keyof typeof payload] === "string"
) {
- configLabelKey = payload[key as keyof typeof payload] as string
+ configLabelKey = payload[key as keyof typeof payload] as string;
} else if (
payloadPayload &&
key in payloadPayload &&
@@ -335,12 +335,12 @@ function getPayloadConfigFromPayload(
) {
configLabelKey = payloadPayload[
key as keyof typeof payloadPayload
- ] as string
+ ] as string;
}
return configLabelKey in config
? config[configLabelKey]
- : config[key as keyof typeof config]
+ : config[key as keyof typeof config];
}
export {
@@ -350,4 +350,4 @@ export {
ChartLegend,
ChartLegendContent,
ChartStyle,
-}
+};
diff --git a/packages/ui/src/components/checkbox.tsx b/packages/ui/src/components/checkbox.tsx
index 640463e..d356057 100644
--- a/packages/ui/src/components/checkbox.tsx
+++ b/packages/ui/src/components/checkbox.tsx
@@ -1,10 +1,10 @@
-"use client"
+"use client";
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { CheckIcon } from "lucide-react"
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
-import { cn } from "@workspace/ui/lib/utils"
+import { cn } from "@workspace/ui/lib/utils";
function Checkbox({
className,
@@ -15,7 +15,7 @@ function Checkbox({
data-slot="checkbox"
className={cn(
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
- className
+ className,
)}
{...props}
>
@@ -26,7 +26,7 @@ function Checkbox({
- )
+ );
}
-export { Checkbox }
+export { Checkbox };
diff --git a/packages/ui/src/components/collapsible.tsx b/packages/ui/src/components/collapsible.tsx
index ae9fad0..90935c6 100644
--- a/packages/ui/src/components/collapsible.tsx
+++ b/packages/ui/src/components/collapsible.tsx
@@ -1,11 +1,11 @@
-"use client"
+"use client";
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
function Collapsible({
...props
}: React.ComponentProps
) {
- return
+ return ;
}
function CollapsibleTrigger({
@@ -16,7 +16,7 @@ function CollapsibleTrigger({
data-slot="collapsible-trigger"
{...props}
/>
- )
+ );
}
function CollapsibleContent({
@@ -27,7 +27,7 @@ function CollapsibleContent({
data-slot="collapsible-content"
{...props}
/>
- )
+ );
}
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/packages/ui/src/components/command.tsx b/packages/ui/src/components/command.tsx
index 369c620..bc1c61b 100644
--- a/packages/ui/src/components/command.tsx
+++ b/packages/ui/src/components/command.tsx
@@ -1,17 +1,17 @@
-"use client"
+"use client";
-import * as React from "react"
-import { Command as CommandPrimitive } from "cmdk"
-import { SearchIcon } from "lucide-react"
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
-import { cn } from "@workspace/ui/lib/utils"
+import { cn } from "@workspace/ui/lib/utils";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
-} from "@workspace/ui/components/dialog"
+} from "@workspace/ui/components/dialog";
function Command({
className,
@@ -22,11 +22,11 @@ function Command({
data-slot="command"
className={cn(
"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
function CommandDialog({
@@ -37,10 +37,10 @@ function CommandDialog({
showCloseButton = true,
...props
}: React.ComponentProps & {
- title?: string
- description?: string
- className?: string
- showCloseButton?: boolean
+ title?: string;
+ description?: string;
+ className?: string;
+ showCloseButton?: boolean;
}) {
return (
- )
+ );
}
function CommandInput({
@@ -74,12 +74,12 @@ function CommandInput({
data-slot="command-input"
className={cn(
"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
function CommandList({
@@ -91,11 +91,11 @@ function CommandList({
data-slot="command-list"
className={cn(
"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
function CommandEmpty({
@@ -107,7 +107,7 @@ function CommandEmpty({
className="py-6 text-center text-sm"
{...props}
/>
- )
+ );
}
function CommandGroup({
@@ -119,11 +119,11 @@ function CommandGroup({
data-slot="command-group"
className={cn(
"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
function CommandSeparator({
@@ -136,7 +136,7 @@ function CommandSeparator({
className={cn("bg-border -mx-1 h-px", className)}
{...props}
/>
- )
+ );
}
function CommandItem({
@@ -148,11 +148,11 @@ function CommandItem({
data-slot="command-item"
className={cn(
"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
function CommandShortcut({
@@ -164,11 +164,11 @@ function CommandShortcut({
data-slot="command-shortcut"
className={cn(
"text-muted-foreground ml-auto text-xs tracking-widest",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
export {
@@ -181,4 +181,4 @@ export {
CommandItem,
CommandShortcut,
CommandSeparator,
-}
+};
diff --git a/packages/ui/src/components/context-menu.tsx b/packages/ui/src/components/context-menu.tsx
index 9a2a7ac..02a42bc 100644
--- a/packages/ui/src/components/context-menu.tsx
+++ b/packages/ui/src/components/context-menu.tsx
@@ -1,15 +1,15 @@
-"use client"
+"use client";
-import * as React from "react"
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
-import { cn } from "@workspace/ui/lib/utils"
+import { cn } from "@workspace/ui/lib/utils";
function ContextMenu({
...props
}: React.ComponentProps) {
- return
+ return ;
}
function ContextMenuTrigger({
@@ -17,7 +17,7 @@ function ContextMenuTrigger({
}: React.ComponentProps) {
return (
- )
+ );
}
function ContextMenuGroup({
@@ -25,7 +25,7 @@ function ContextMenuGroup({
}: React.ComponentProps) {
return (
- )
+ );
}
function ContextMenuPortal({
@@ -33,13 +33,13 @@ function ContextMenuPortal({
}: React.ComponentProps) {
return (
- )
+ );
}
function ContextMenuSub({
...props
}: React.ComponentProps) {
- return
+ return ;
}
function ContextMenuRadioGroup({
@@ -50,7 +50,7 @@ function ContextMenuRadioGroup({
data-slot="context-menu-radio-group"
{...props}
/>
- )
+ );
}
function ContextMenuSubTrigger({
@@ -59,7 +59,7 @@ function ContextMenuSubTrigger({
children,
...props
}: React.ComponentProps & {
- inset?: boolean
+ inset?: boolean;
}) {
return (
{children}
- )
+ );
}
function ContextMenuSubContent({
@@ -86,11 +86,11 @@ function ContextMenuSubContent({
data-slot="context-menu-sub-content"
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
function ContextMenuContent({
@@ -103,12 +103,12 @@ function ContextMenuContent({
data-slot="context-menu-content"
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
function ContextMenuItem({
@@ -117,8 +117,8 @@ function ContextMenuItem({
variant = "default",
...props
}: React.ComponentProps & {
- inset?: boolean
- variant?: "default" | "destructive"
+ inset?: boolean;
+ variant?: "default" | "destructive";
}) {
return (
- )
+ );
}
function ContextMenuCheckboxItem({
@@ -145,7 +145,7 @@ function ContextMenuCheckboxItem({
data-slot="context-menu-checkbox-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
- className
+ className,
)}
checked={checked}
{...props}
@@ -157,7 +157,7 @@ function ContextMenuCheckboxItem({
{children}
- )
+ );
}
function ContextMenuRadioItem({
@@ -170,7 +170,7 @@ function ContextMenuRadioItem({
data-slot="context-menu-radio-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
- className
+ className,
)}
{...props}
>
@@ -181,7 +181,7 @@ function ContextMenuRadioItem({
{children}
- )
+ );
}
function ContextMenuLabel({
@@ -189,7 +189,7 @@ function ContextMenuLabel({
inset,
...props
}: React.ComponentProps & {
- inset?: boolean
+ inset?: boolean;
}) {
return (
- )
+ );
}
function ContextMenuSeparator({
@@ -214,7 +214,7 @@ function ContextMenuSeparator({
className={cn("bg-border -mx-1 my-1 h-px", className)}
{...props}
/>
- )
+ );
}
function ContextMenuShortcut({
@@ -226,11 +226,11 @@ function ContextMenuShortcut({
data-slot="context-menu-shortcut"
className={cn(
"text-muted-foreground ml-auto text-xs tracking-widest",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
export {
@@ -249,4 +249,4 @@ export {
ContextMenuSubContent,
ContextMenuSubTrigger,
ContextMenuRadioGroup,
-}
+};
diff --git a/packages/ui/src/components/conversation-status-icon.tsx b/packages/ui/src/components/conversation-status-icon.tsx
index d3743c4..379097e 100644
--- a/packages/ui/src/components/conversation-status-icon.tsx
+++ b/packages/ui/src/components/conversation-status-icon.tsx
@@ -1,37 +1,44 @@
-import { ArrowRightIcon, ArrowUpIcon, CheckIcon } from "lucide-react"
-import { cn } from "@workspace/ui/lib/utils"
+import { ArrowRightIcon, ArrowUpIcon, CheckIcon } from "lucide-react";
+import { cn } from "@workspace/ui/lib/utils";
interface ConversationStatusIconProps {
- status: "unresolved" | "escalated" | "resolved",
- className?:string;
-}
+ status: "unresolved" | "escalated" | "resolved";
+ className?: string;
+}
const statusConfig = {
- resolved: {
- icon: CheckIcon,
- bgColor: "bg-[#3FB62F]"
- },
- unresolved: {
- icon: ArrowRightIcon,
- bgColor: "bg-destructive"
- },
- escalated: {
- icon: ArrowUpIcon,
- bgColor: "bg-yellow-500"
- }
-} as const
-
+ resolved: {
+ icon: CheckIcon,
+ bgColor: "bg-[#3FB62F]",
+ },
+ unresolved: {
+ icon: ArrowRightIcon,
+ bgColor: "bg-destructive",
+ },
+ escalated: {
+ icon: ArrowUpIcon,
+ bgColor: "bg-yellow-500",
+ },
+} as const;
-const ConversationStatusIcon = ({status, className}: ConversationStatusIconProps) => {
+const ConversationStatusIcon = ({
+ status,
+ className,
+}: ConversationStatusIconProps) => {
+ const config = statusConfig[status];
+ const Icon = config.icon;
- const config = statusConfig[status];
- const Icon = config.icon;
-
- return (
-
-
+ return (
+
+
- )
-}
+ );
+};
-export default ConversationStatusIcon;
\ No newline at end of file
+export default ConversationStatusIcon;
diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx
index b905322..8f350cc 100644
--- a/packages/ui/src/components/dialog.tsx
+++ b/packages/ui/src/components/dialog.tsx
@@ -1,33 +1,33 @@
-"use client"
+"use client";
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
-import { cn } from "@workspace/ui/lib/utils"
+import { cn } from "@workspace/ui/lib/utils";
function Dialog({
...props
}: React.ComponentProps
) {
- return
+ return ;
}
function DialogTrigger({
...props
}: React.ComponentProps) {
- return
+ return ;
}
function DialogPortal({
...props
}: React.ComponentProps) {
- return
+ return ;
}
function DialogClose({
...props
}: React.ComponentProps) {
- return
+ return ;
}
function DialogOverlay({
@@ -39,11 +39,11 @@ function DialogOverlay({
data-slot="dialog-overlay"
className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
function DialogContent({
@@ -52,7 +52,7 @@ function DialogContent({
showCloseButton = true,
...props
}: React.ComponentProps & {
- showCloseButton?: boolean
+ showCloseButton?: boolean;
}) {
return (
@@ -61,7 +61,7 @@ function DialogContent({
data-slot="dialog-content"
className={cn(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out 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 p-6 shadow-lg duration-200 sm:max-w-lg",
- className
+ className,
)}
{...props}
>
@@ -77,7 +77,7 @@ function DialogContent({
)}
- )
+ );
}
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -87,7 +87,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
{...props}
/>
- )
+ );
}
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -96,11 +96,11 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
data-slot="dialog-footer"
className={cn(
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
function DialogTitle({
@@ -113,7 +113,7 @@ function DialogTitle({
className={cn("text-lg leading-none font-semibold", className)}
{...props}
/>
- )
+ );
}
function DialogDescription({
@@ -126,7 +126,7 @@ function DialogDescription({
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
- )
+ );
}
export {
@@ -140,4 +140,4 @@ export {
DialogPortal,
DialogTitle,
DialogTrigger,
-}
+};
diff --git a/packages/ui/src/components/dicebear-avatar.tsx b/packages/ui/src/components/dicebear-avatar.tsx
index b7678d1..affb4a8 100644
--- a/packages/ui/src/components/dicebear-avatar.tsx
+++ b/packages/ui/src/components/dicebear-avatar.tsx
@@ -1,68 +1,74 @@
import { useMemo } from "react";
-import {createAvatar} from "@dicebear/core"
-import {glass} from "@dicebear/collection"
+import { createAvatar } from "@dicebear/core";
+import { glass } from "@dicebear/collection";
import { Avatar, AvatarImage } from "@workspace/ui/components/avatar";
import { cn } from "@workspace/ui/lib/utils";
-
interface DicebearAvatarProps {
- seed: string;
- size?: number;
- className?:string;
- badgeClassName?:string;
- imageUrl?:string;
- badgeImageUrl?:string;
+ seed: string;
+ size?: number;
+ className?: string;
+ badgeClassName?: string;
+ imageUrl?: string;
+ badgeImageUrl?: string;
}
- const DicebearAvatar = ({
- seed,
- size = 32,
- className,
- imageUrl,
- badgeImageUrl,
- badgeClassName
-}:DicebearAvatarProps) => {
+const DicebearAvatar = ({
+ seed,
+ size = 32,
+ className,
+ imageUrl,
+ badgeImageUrl,
+ badgeClassName,
+}: DicebearAvatarProps) => {
+ const avatarSrc = useMemo(() => {
+ if (imageUrl) {
+ return imageUrl;
+ }
- const avatarSrc = useMemo(()=>{
- if(imageUrl){
- return imageUrl;
- }
-
- const avatar = createAvatar(glass, {
- seed: seed.toLowerCase().trim(),
- size
- })
+ const avatar = createAvatar(glass, {
+ seed: seed.toLowerCase().trim(),
+ size,
+ });
- // not using request instead creating svg Data uri. No need of network request
- return avatar.toDataUri()
- },[seed, size, imageUrl]);
+ // not using request instead creating svg Data uri. No need of network request
+ return avatar.toDataUri();
+ }, [seed, size, imageUrl]);
- const badgeSize = Math.round(size * 0.50);
- return (
-
-
-
-
- {badgeImageUrl &&
-
-

-
}
-
+ const badgeSize = Math.round(size * 0.5);
+ return (
+
+
+
+
+ {badgeImageUrl && (
+
+
- )
-
-
-
-}
+ )}
+
+ );
+};
-export default DicebearAvatar
\ No newline at end of file
+export default DicebearAvatar;
diff --git a/packages/ui/src/components/drawer.tsx b/packages/ui/src/components/drawer.tsx
index 658b0e3..7849713 100644
--- a/packages/ui/src/components/drawer.tsx
+++ b/packages/ui/src/components/drawer.tsx
@@ -1,32 +1,32 @@
-"use client"
+"use client";
-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
-import { cn } from "@workspace/ui/lib/utils"
+import { cn } from "@workspace/ui/lib/utils";
function Drawer({
...props
}: React.ComponentProps
) {
- return
+ return ;
}
function DrawerTrigger({
...props
}: React.ComponentProps) {
- return
+ return ;
}
function DrawerPortal({
...props
}: React.ComponentProps) {
- return
+ return ;
}
function DrawerClose({
...props
}: React.ComponentProps) {
- return
+ return ;
}
function DrawerOverlay({
@@ -38,11 +38,11 @@ function DrawerOverlay({
data-slot="drawer-overlay"
className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
function DrawerContent({
@@ -61,7 +61,7 @@ function DrawerContent({
"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
- className
+ className,
)}
{...props}
>
@@ -69,7 +69,7 @@ function DrawerContent({
{children}
- )
+ );
}
function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -78,11 +78,11 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
data-slot="drawer-header"
className={cn(
"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -92,7 +92,7 @@ function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
{...props}
/>
- )
+ );
}
function DrawerTitle({
@@ -105,7 +105,7 @@ function DrawerTitle({
className={cn("text-foreground font-semibold", className)}
{...props}
/>
- )
+ );
}
function DrawerDescription({
@@ -118,7 +118,7 @@ function DrawerDescription({
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
- )
+ );
}
export {
@@ -132,4 +132,4 @@ export {
DrawerFooter,
DrawerTitle,
DrawerDescription,
-}
+};
diff --git a/packages/ui/src/components/dropdown-menu.tsx b/packages/ui/src/components/dropdown-menu.tsx
index 8f4f22d..18bb565 100644
--- a/packages/ui/src/components/dropdown-menu.tsx
+++ b/packages/ui/src/components/dropdown-menu.tsx
@@ -1,15 +1,15 @@
-"use client"
+"use client";
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
-import { cn } from "@workspace/ui/lib/utils"
+import { cn } from "@workspace/ui/lib/utils";
function DropdownMenu({
...props
}: React.ComponentProps) {
- return
+ return ;
}
function DropdownMenuPortal({
@@ -17,7 +17,7 @@ function DropdownMenuPortal({
}: React.ComponentProps) {
return (
- )
+ );
}
function DropdownMenuTrigger({
@@ -28,7 +28,7 @@ function DropdownMenuTrigger({
data-slot="dropdown-menu-trigger"
{...props}
/>
- )
+ );
}
function DropdownMenuContent({
@@ -43,12 +43,12 @@ function DropdownMenuContent({
sideOffset={sideOffset}
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
function DropdownMenuGroup({
@@ -56,7 +56,7 @@ function DropdownMenuGroup({
}: React.ComponentProps) {
return (
- )
+ );
}
function DropdownMenuItem({
@@ -65,8 +65,8 @@ function DropdownMenuItem({
variant = "default",
...props
}: React.ComponentProps & {
- inset?: boolean
- variant?: "default" | "destructive"
+ inset?: boolean;
+ variant?: "default" | "destructive";
}) {
return (
- )
+ );
}
function DropdownMenuCheckboxItem({
@@ -93,7 +93,7 @@ function DropdownMenuCheckboxItem({
data-slot="dropdown-menu-checkbox-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
- className
+ className,
)}
checked={checked}
{...props}
@@ -105,7 +105,7 @@ function DropdownMenuCheckboxItem({
{children}
- )
+ );
}
function DropdownMenuRadioGroup({
@@ -116,7 +116,7 @@ function DropdownMenuRadioGroup({
data-slot="dropdown-menu-radio-group"
{...props}
/>
- )
+ );
}
function DropdownMenuRadioItem({
@@ -129,7 +129,7 @@ function DropdownMenuRadioItem({
data-slot="dropdown-menu-radio-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
- className
+ className,
)}
{...props}
>
@@ -140,7 +140,7 @@ function DropdownMenuRadioItem({
{children}
- )
+ );
}
function DropdownMenuLabel({
@@ -148,7 +148,7 @@ function DropdownMenuLabel({
inset,
...props
}: React.ComponentProps & {
- inset?: boolean
+ inset?: boolean;
}) {
return (
- )
+ );
}
function DropdownMenuSeparator({
@@ -173,7 +173,7 @@ function DropdownMenuSeparator({
className={cn("bg-border -mx-1 my-1 h-px", className)}
{...props}
/>
- )
+ );
}
function DropdownMenuShortcut({
@@ -185,17 +185,17 @@ function DropdownMenuShortcut({
data-slot="dropdown-menu-shortcut"
className={cn(
"text-muted-foreground ml-auto text-xs tracking-widest",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
function DropdownMenuSub({
...props
}: React.ComponentProps) {
- return
+ return ;
}
function DropdownMenuSubTrigger({
@@ -204,7 +204,7 @@ function DropdownMenuSubTrigger({
children,
...props
}: React.ComponentProps & {
- inset?: boolean
+ inset?: boolean;
}) {
return (
{children}
- )
+ );
}
function DropdownMenuSubContent({
@@ -231,11 +231,11 @@ function DropdownMenuSubContent({
data-slot="dropdown-menu-sub-content"
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
export {
@@ -254,4 +254,4 @@ export {
DropdownMenuSub,
DropdownMenuSubTrigger,
DropdownMenuSubContent,
-}
+};
diff --git a/packages/ui/src/components/dropzone.tsx b/packages/ui/src/components/dropzone.tsx
index 72bf8d7..779ad34 100644
--- a/packages/ui/src/components/dropzone.tsx
+++ b/packages/ui/src/components/dropzone.tsx
@@ -30,7 +30,7 @@ const renderBytes = (bytes: number) => {
};
const DropzoneContext = createContext(
- undefined
+ undefined,
);
export type DropzoneProps = Omit & {
@@ -39,7 +39,7 @@ export type DropzoneProps = Omit & {
onDrop?: (
acceptedFiles: File[],
fileRejections: FileRejection[],
- event: DropEvent
+ event: DropEvent,
) => void;
children?: ReactNode;
};
@@ -85,7 +85,7 @@ export const Dropzone = ({
className={cn(
"relative h-auto w-full flex-col overflow-hidden p-8",
isDragActive && "outline-none ring-1 ring-ring",
- className
+ className,
)}
disabled={disabled}
type="button"
@@ -138,7 +138,7 @@ export const DropzoneContent = ({
{src.length > maxLabelItems
? `${new Intl.ListFormat("en").format(
- src.slice(0, maxLabelItems).map((file) => file.name)
+ src.slice(0, maxLabelItems).map((file) => file.name),
)} and ${src.length - maxLabelItems} more`
: new Intl.ListFormat("en").format(src.map((file) => file.name))}
@@ -199,4 +199,4 @@ export const DropzoneEmptyState = ({
)}
);
-};
\ No newline at end of file
+};
diff --git a/packages/ui/src/components/form.tsx b/packages/ui/src/components/form.tsx
index 9dca733..e54a6fd 100644
--- a/packages/ui/src/components/form.tsx
+++ b/packages/ui/src/components/form.tsx
@@ -1,8 +1,8 @@
-"use client"
+"use client";
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
import {
Controller,
FormProvider,
@@ -11,23 +11,23 @@ import {
type ControllerProps,
type FieldPath,
type FieldValues,
-} from "react-hook-form"
+} from "react-hook-form";
-import { cn } from "@workspace/ui/lib/utils"
-import { Label } from "@workspace/ui/components/label"
+import { cn } from "@workspace/ui/lib/utils";
+import { Label } from "@workspace/ui/components/label";
-const Form = FormProvider
+const Form = FormProvider;
type FormFieldContextValue<
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath = FieldPath,
> = {
- name: TName
-}
+ name: TName;
+};
const FormFieldContext = React.createContext(
- {} as FormFieldContextValue
-)
+ {} as FormFieldContextValue,
+);
const FormField = <
TFieldValues extends FieldValues = FieldValues,
@@ -39,21 +39,21 @@ const FormField = <
- )
-}
+ );
+};
const useFormField = () => {
- const fieldContext = React.useContext(FormFieldContext)
- const itemContext = React.useContext(FormItemContext)
- const { getFieldState } = useFormContext()
- const formState = useFormState({ name: fieldContext.name })
- const fieldState = getFieldState(fieldContext.name, formState)
+ const fieldContext = React.useContext(FormFieldContext);
+ const itemContext = React.useContext(FormItemContext);
+ const { getFieldState } = useFormContext();
+ const formState = useFormState({ name: fieldContext.name });
+ const fieldState = getFieldState(fieldContext.name, formState);
if (!fieldContext) {
- throw new Error("useFormField should be used within ")
+ throw new Error("useFormField should be used within ");
}
- const { id } = itemContext
+ const { id } = itemContext;
return {
id,
@@ -62,19 +62,19 @@ const useFormField = () => {
formDescriptionId: `${id}-form-item-description`,
formMessageId: `${id}-form-item-message`,
...fieldState,
- }
-}
+ };
+};
type FormItemContextValue = {
- id: string
-}
+ id: string;
+};
const FormItemContext = React.createContext(
- {} as FormItemContextValue
-)
+ {} as FormItemContextValue,
+);
function FormItem({ className, ...props }: React.ComponentProps<"div">) {
- const id = React.useId()
+ const id = React.useId();
return (
@@ -84,14 +84,14 @@ function FormItem({ className, ...props }: React.ComponentProps<"div">) {
{...props}
/>
- )
+ );
}
function FormLabel({
className,
...props
}: React.ComponentProps) {
- const { error, formItemId } = useFormField()
+ const { error, formItemId } = useFormField();
return (
- )
+ );
}
function FormControl({ ...props }: React.ComponentProps) {
- const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+ const { error, formItemId, formDescriptionId, formMessageId } =
+ useFormField();
return (
) {
aria-invalid={!!error}
{...props}
/>
- )
+ );
}
function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
- const { formDescriptionId } = useFormField()
+ const { formDescriptionId } = useFormField();
return (
) {
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
- )
+ );
}
function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
- const { error, formMessageId } = useFormField()
- const body = error ? String(error?.message ?? "") : props.children
+ const { error, formMessageId } = useFormField();
+ const body = error ? String(error?.message ?? "") : props.children;
if (!body) {
- return null
+ return null;
}
return (
@@ -152,7 +153,7 @@ function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
>
{body}
- )
+ );
}
export {
@@ -164,4 +165,4 @@ export {
FormDescription,
FormMessage,
FormField,
-}
+};
diff --git a/packages/ui/src/components/hint.tsx b/packages/ui/src/components/hint.tsx
index cbac50f..5852181 100644
--- a/packages/ui/src/components/hint.tsx
+++ b/packages/ui/src/components/hint.tsx
@@ -12,7 +12,7 @@ interface HintProps {
text: string;
side?: "top" | "right" | "bottom" | "left";
align?: "start" | "center" | "end";
-};
+}
export const Hint = ({
children,
diff --git a/packages/ui/src/components/hover-card.tsx b/packages/ui/src/components/hover-card.tsx
index d3b337f..a3a8602 100644
--- a/packages/ui/src/components/hover-card.tsx
+++ b/packages/ui/src/components/hover-card.tsx
@@ -1,14 +1,14 @@
-"use client"
+"use client";
-import * as React from "react"
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
-import { cn } from "@workspace/ui/lib/utils"
+import { cn } from "@workspace/ui/lib/utils";
function HoverCard({
...props
}: React.ComponentProps) {
- return
+ return ;
}
function HoverCardTrigger({
@@ -16,7 +16,7 @@ function HoverCardTrigger({
}: React.ComponentProps) {
return (
- )
+ );
}
function HoverCardContent({
@@ -33,12 +33,12 @@ function HoverCardContent({
sideOffset={sideOffset}
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
-export { HoverCard, HoverCardTrigger, HoverCardContent }
+export { HoverCard, HoverCardTrigger, HoverCardContent };
diff --git a/packages/ui/src/components/infinite-scroll-trigger.tsx b/packages/ui/src/components/infinite-scroll-trigger.tsx
index 5c8a00e..d284596 100644
--- a/packages/ui/src/components/infinite-scroll-trigger.tsx
+++ b/packages/ui/src/components/infinite-scroll-trigger.tsx
@@ -1,51 +1,48 @@
-
-import React from 'react'
-import { Button } from '@workspace/ui/components/button';
-import { cn } from '@workspace/ui/lib/utils';
+import React from "react";
+import { Button } from "@workspace/ui/components/button";
+import { cn } from "@workspace/ui/lib/utils";
interface InfiniteScrollTriggerProps {
- canLoadMore: boolean;
- isLoadingMore: boolean;
- onLoadMore: () => void;
- loadMoreText?: string;
- noMoreText?: string;
- className?:string;
- ref?: React.Ref
-
+ canLoadMore: boolean;
+ isLoadingMore: boolean;
+ onLoadMore: () => void;
+ loadMoreText?: string;
+ noMoreText?: string;
+ className?: string;
+ ref?: React.Ref;
}
const InfiniteScrollTrigger = ({
- canLoadMore,
- isLoadingMore,
- onLoadMore,
- loadMoreText = "Load more",
- noMoreText = "No more items",
- className,
- ref
-}:InfiniteScrollTriggerProps) => {
+ canLoadMore,
+ isLoadingMore,
+ onLoadMore,
+ loadMoreText = "Load more",
+ noMoreText = "No more items",
+ className,
+ ref,
+}: InfiniteScrollTriggerProps) => {
+ // console.log("Infinite Scroll Trigger component called")
- // console.log("Infinite Scroll Trigger component called")
-
- // console.log({ref});
- let text = loadMoreText;
+ // console.log({ref});
+ let text = loadMoreText;
- if(isLoadingMore) {
- text = "Loading..."
- } else if(!canLoadMore) {
- text = noMoreText
- }
+ if (isLoadingMore) {
+ text = "Loading...";
+ } else if (!canLoadMore) {
+ text = noMoreText;
+ }
return (
-
+
- )
-}
+ );
+};
-export default InfiniteScrollTrigger
\ No newline at end of file
+export default InfiniteScrollTrigger;
diff --git a/packages/ui/src/components/input-otp.tsx b/packages/ui/src/components/input-otp.tsx
index ef23e0a..c3069ae 100644
--- a/packages/ui/src/components/input-otp.tsx
+++ b/packages/ui/src/components/input-otp.tsx
@@ -1,29 +1,29 @@
-"use client"
+"use client";
-import * as React from "react"
-import { OTPInput, OTPInputContext } from "input-otp"
-import { MinusIcon } from "lucide-react"
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { MinusIcon } from "lucide-react";
-import { cn } from "@workspace/ui/lib/utils"
+import { cn } from "@workspace/ui/lib/utils";
function InputOTP({
className,
containerClassName,
...props
}: React.ComponentProps & {
- containerClassName?: string
+ containerClassName?: string;
}) {
return (
- )
+ );
}
function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
@@ -33,7 +33,7 @@ function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
className={cn("flex items-center", className)}
{...props}
/>
- )
+ );
}
function InputOTPSlot({
@@ -41,10 +41,10 @@ function InputOTPSlot({
className,
...props
}: React.ComponentProps<"div"> & {
- index: number
+ index: number;
}) {
- const inputOTPContext = React.useContext(OTPInputContext)
- const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+ const inputOTPContext = React.useContext(OTPInputContext);
+ const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
return (
@@ -63,7 +63,7 @@ function InputOTPSlot({
)}
- )
+ );
}
function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
@@ -71,7 +71,7 @@ function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
- )
+ );
}
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
diff --git a/packages/ui/src/components/input.tsx b/packages/ui/src/components/input.tsx
index cc414ad..1942856 100644
--- a/packages/ui/src/components/input.tsx
+++ b/packages/ui/src/components/input.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
-import { cn } from "@workspace/ui/lib/utils"
+import { cn } from "@workspace/ui/lib/utils";
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
return (
@@ -11,11 +11,11 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
-export { Input }
+export { Input };
diff --git a/packages/ui/src/components/label.tsx b/packages/ui/src/components/label.tsx
index 4aeafb5..c107c59 100644
--- a/packages/ui/src/components/label.tsx
+++ b/packages/ui/src/components/label.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
-import { cn } from "@workspace/ui/lib/utils"
+import { cn } from "@workspace/ui/lib/utils";
function Label({
className,
@@ -14,11 +14,11 @@ function Label({
data-slot="label"
className={cn(
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
-export { Label }
+export { Label };
diff --git a/packages/ui/src/components/menubar.tsx b/packages/ui/src/components/menubar.tsx
index ac97e86..6c59a0e 100644
--- a/packages/ui/src/components/menubar.tsx
+++ b/packages/ui/src/components/menubar.tsx
@@ -1,10 +1,10 @@
-"use client"
+"use client";
-import * as React from "react"
-import * as MenubarPrimitive from "@radix-ui/react-menubar"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import * as React from "react";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
-import { cn } from "@workspace/ui/lib/utils"
+import { cn } from "@workspace/ui/lib/utils";
function Menubar({
className,
@@ -15,29 +15,29 @@ function Menubar({
data-slot="menubar"
className={cn(
"bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
function MenubarMenu({
...props
}: React.ComponentProps) {
- return
+ return ;
}
function MenubarGroup({
...props
}: React.ComponentProps) {
- return
+ return ;
}
function MenubarPortal({
...props
}: React.ComponentProps) {
- return
+ return ;
}
function MenubarRadioGroup({
@@ -45,7 +45,7 @@ function MenubarRadioGroup({
}: React.ComponentProps) {
return (
- )
+ );
}
function MenubarTrigger({
@@ -57,11 +57,11 @@ function MenubarTrigger({
data-slot="menubar-trigger"
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
function MenubarContent({
@@ -80,12 +80,12 @@ function MenubarContent({
sideOffset={sideOffset}
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
function MenubarItem({
@@ -94,8 +94,8 @@ function MenubarItem({
variant = "default",
...props
}: React.ComponentProps & {
- inset?: boolean
- variant?: "default" | "destructive"
+ inset?: boolean;
+ variant?: "default" | "destructive";
}) {
return (
- )
+ );
}
function MenubarCheckboxItem({
@@ -122,7 +122,7 @@ function MenubarCheckboxItem({
data-slot="menubar-checkbox-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
- className
+ className,
)}
checked={checked}
{...props}
@@ -134,7 +134,7 @@ function MenubarCheckboxItem({
{children}
- )
+ );
}
function MenubarRadioItem({
@@ -147,7 +147,7 @@ function MenubarRadioItem({
data-slot="menubar-radio-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
- className
+ className,
)}
{...props}
>
@@ -158,7 +158,7 @@ function MenubarRadioItem({
{children}
- )
+ );
}
function MenubarLabel({
@@ -166,7 +166,7 @@ function MenubarLabel({
inset,
...props
}: React.ComponentProps & {
- inset?: boolean
+ inset?: boolean;
}) {
return (
- )
+ );
}
function MenubarSeparator({
@@ -191,7 +191,7 @@ function MenubarSeparator({
className={cn("bg-border -mx-1 my-1 h-px", className)}
{...props}
/>
- )
+ );
}
function MenubarShortcut({
@@ -203,17 +203,17 @@ function MenubarShortcut({
data-slot="menubar-shortcut"
className={cn(
"text-muted-foreground ml-auto text-xs tracking-widest",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
function MenubarSub({
...props
}: React.ComponentProps) {
- return
+ return ;
}
function MenubarSubTrigger({
@@ -222,7 +222,7 @@ function MenubarSubTrigger({
children,
...props
}: React.ComponentProps & {
- inset?: boolean
+ inset?: boolean;
}) {
return (
{children}
- )
+ );
}
function MenubarSubContent({
@@ -249,11 +249,11 @@ function MenubarSubContent({
data-slot="menubar-sub-content"
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
export {
@@ -273,4 +273,4 @@ export {
MenubarSub,
MenubarSubTrigger,
MenubarSubContent,
-}
+};
diff --git a/packages/ui/src/components/navigation-menu.tsx b/packages/ui/src/components/navigation-menu.tsx
index 2fc3904..2a3ed74 100644
--- a/packages/ui/src/components/navigation-menu.tsx
+++ b/packages/ui/src/components/navigation-menu.tsx
@@ -1,9 +1,9 @@
-import * as React from "react"
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
-import { cva } from "class-variance-authority"
-import { ChevronDownIcon } from "lucide-react"
+import * as React from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDownIcon } from "lucide-react";
-import { cn } from "@workspace/ui/lib/utils"
+import { cn } from "@workspace/ui/lib/utils";
function NavigationMenu({
className,
@@ -11,7 +11,7 @@ function NavigationMenu({
viewport = true,
...props
}: React.ComponentProps & {
- viewport?: boolean
+ viewport?: boolean;
}) {
return (
{children}
{viewport && }
- )
+ );
}
function NavigationMenuList({
@@ -38,11 +38,11 @@ function NavigationMenuList({
data-slot="navigation-menu-list"
className={cn(
"group flex flex-1 list-none items-center justify-center gap-1",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
function NavigationMenuItem({
@@ -55,12 +55,12 @@ function NavigationMenuItem({
className={cn("relative", className)}
{...props}
/>
- )
+ );
}
const navigationMenuTriggerStyle = cva(
- "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
-)
+ "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
+);
function NavigationMenuTrigger({
className,
@@ -79,7 +79,7 @@ function NavigationMenuTrigger({
aria-hidden="true"
/>
- )
+ );
}
function NavigationMenuContent({
@@ -92,11 +92,11 @@ function NavigationMenuContent({
className={cn(
"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
function NavigationMenuViewport({
@@ -106,19 +106,19 @@ function NavigationMenuViewport({
return (
- )
+ );
}
function NavigationMenuLink({
@@ -130,11 +130,11 @@ function NavigationMenuLink({
data-slot="navigation-menu-link"
className={cn(
"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
function NavigationMenuIndicator({
@@ -146,13 +146,13 @@ function NavigationMenuIndicator({
data-slot="navigation-menu-indicator"
className={cn(
"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
- className
+ className,
)}
{...props}
>
- )
+ );
}
export {
@@ -165,4 +165,4 @@ export {
NavigationMenuIndicator,
NavigationMenuViewport,
navigationMenuTriggerStyle,
-}
+};
diff --git a/packages/ui/src/components/pagination.tsx b/packages/ui/src/components/pagination.tsx
index 5c909ae..1032310 100644
--- a/packages/ui/src/components/pagination.tsx
+++ b/packages/ui/src/components/pagination.tsx
@@ -1,12 +1,12 @@
-import * as React from "react"
+import * as React from "react";
import {
ChevronLeftIcon,
ChevronRightIcon,
MoreHorizontalIcon,
-} from "lucide-react"
+} from "lucide-react";
-import { cn } from "@workspace/ui/lib/utils"
-import { Button, buttonVariants } from "@workspace/ui/components/button"
+import { cn } from "@workspace/ui/lib/utils";
+import { Button, buttonVariants } from "@workspace/ui/components/button";
function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
return (
@@ -17,7 +17,7 @@ function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
className={cn("mx-auto flex w-full justify-center", className)}
{...props}
/>
- )
+ );
}
function PaginationContent({
@@ -30,17 +30,17 @@ function PaginationContent({
className={cn("flex flex-row items-center gap-1", className)}
{...props}
/>
- )
+ );
}
function PaginationItem({ ...props }: React.ComponentProps<"li">) {
- return
+ return ;
}
type PaginationLinkProps = {
- isActive?: boolean
+ isActive?: boolean;
} & Pick, "size"> &
- React.ComponentProps<"a">
+ React.ComponentProps<"a">;
function PaginationLink({
className,
@@ -58,11 +58,11 @@ function PaginationLink({
variant: isActive ? "outline" : "ghost",
size,
}),
- className
+ className,
)}
{...props}
/>
- )
+ );
}
function PaginationPrevious({
@@ -79,7 +79,7 @@ function PaginationPrevious({
Previous
- )
+ );
}
function PaginationNext({
@@ -96,7 +96,7 @@ function PaginationNext({
Next
- )
+ );
}
function PaginationEllipsis({
@@ -113,7 +113,7 @@ function PaginationEllipsis({
More pages
- )
+ );
}
export {
@@ -124,4 +124,4 @@ export {
PaginationPrevious,
PaginationNext,
PaginationEllipsis,
-}
+};
diff --git a/packages/ui/src/components/popover.tsx b/packages/ui/src/components/popover.tsx
index d15b81e..41e7a33 100644
--- a/packages/ui/src/components/popover.tsx
+++ b/packages/ui/src/components/popover.tsx
@@ -1,20 +1,20 @@
-"use client"
+"use client";
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { cn } from "@workspace/ui/lib/utils"
+import { cn } from "@workspace/ui/lib/utils";
function Popover({
...props
}: React.ComponentProps) {
- return
+ return ;
}
function PopoverTrigger({
...props
}: React.ComponentProps) {
- return
+ return ;
}
function PopoverContent({
@@ -31,18 +31,18 @@ function PopoverContent({
sideOffset={sideOffset}
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
function PopoverAnchor({
...props
}: React.ComponentProps) {
- return
+ return ;
}
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/packages/ui/src/components/progress.tsx b/packages/ui/src/components/progress.tsx
index ef0bcb5..d7e2f8a 100644
--- a/packages/ui/src/components/progress.tsx
+++ b/packages/ui/src/components/progress.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
-import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
-import { cn } from "@workspace/ui/lib/utils"
+import { cn } from "@workspace/ui/lib/utils";
function Progress({
className,
@@ -15,7 +15,7 @@ function Progress({
data-slot="progress"
className={cn(
"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
- className
+ className,
)}
{...props}
>
@@ -25,7 +25,7 @@ function Progress({
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
/>
- )
+ );
}
-export { Progress }
+export { Progress };
diff --git a/packages/ui/src/components/radio-group.tsx b/packages/ui/src/components/radio-group.tsx
index 1de4f6e..f4a1a08 100644
--- a/packages/ui/src/components/radio-group.tsx
+++ b/packages/ui/src/components/radio-group.tsx
@@ -1,10 +1,10 @@
-"use client"
+"use client";
-import * as React from "react"
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { CircleIcon } from "lucide-react"
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { CircleIcon } from "lucide-react";
-import { cn } from "@workspace/ui/lib/utils"
+import { cn } from "@workspace/ui/lib/utils";
function RadioGroup({
className,
@@ -16,7 +16,7 @@ function RadioGroup({
className={cn("grid gap-3", className)}
{...props}
/>
- )
+ );
}
function RadioGroupItem({
@@ -28,7 +28,7 @@ function RadioGroupItem({
data-slot="radio-group-item"
className={cn(
"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
- className
+ className,
)}
{...props}
>
@@ -39,7 +39,7 @@ function RadioGroupItem({
- )
+ );
}
-export { RadioGroup, RadioGroupItem }
+export { RadioGroup, RadioGroupItem };
diff --git a/packages/ui/src/components/resizable.tsx b/packages/ui/src/components/resizable.tsx
index 31fa2cb..72d9fa0 100644
--- a/packages/ui/src/components/resizable.tsx
+++ b/packages/ui/src/components/resizable.tsx
@@ -1,10 +1,10 @@
-"use client"
+"use client";
-import * as React from "react"
-import { GripVerticalIcon } from "lucide-react"
-import * as ResizablePrimitive from "react-resizable-panels"
+import * as React from "react";
+import { GripVerticalIcon } from "lucide-react";
+import * as ResizablePrimitive from "react-resizable-panels";
-import { cn } from "@workspace/ui/lib/utils"
+import { cn } from "@workspace/ui/lib/utils";
function ResizablePanelGroup({
className,
@@ -15,17 +15,17 @@ function ResizablePanelGroup({
data-slot="resizable-panel-group"
className={cn(
"flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
function ResizablePanel({
...props
}: React.ComponentProps) {
- return
+ return ;
}
function ResizableHandle({
@@ -33,14 +33,14 @@ function ResizableHandle({
className,
...props
}: React.ComponentProps & {
- withHandle?: boolean
+ withHandle?: boolean;
}) {
return (
div]:rotate-90",
- className
+ className,
)}
{...props}
>
@@ -50,7 +50,7 @@ function ResizableHandle({
)}
- )
+ );
}
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
diff --git a/packages/ui/src/components/scroll-area.tsx b/packages/ui/src/components/scroll-area.tsx
index 848b286..aae7a1f 100644
--- a/packages/ui/src/components/scroll-area.tsx
+++ b/packages/ui/src/components/scroll-area.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import { cn } from "@workspace/ui/lib/utils"
+import { cn } from "@workspace/ui/lib/utils";
function ScrollArea({
className,
@@ -25,7 +25,7 @@ function ScrollArea({
- )
+ );
}
function ScrollBar({
@@ -43,7 +43,7 @@ function ScrollBar({
"h-full w-2.5 border-l border-l-transparent",
orientation === "horizontal" &&
"h-2.5 flex-col border-t border-t-transparent",
- className
+ className,
)}
{...props}
>
@@ -52,7 +52,7 @@ function ScrollBar({
className="bg-border relative flex-1 rounded-full"
/>
- )
+ );
}
-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
index 250eb1f..ecf0445 100644
--- a/packages/ui/src/components/select.tsx
+++ b/packages/ui/src/components/select.tsx
@@ -1,27 +1,27 @@
-"use client"
+"use client";
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-import { cn } from "@workspace/ui/lib/utils"
+import { cn } from "@workspace/ui/lib/utils";
function Select({
...props
}: React.ComponentProps) {
- return
+ return ;
}
function SelectGroup({
...props
}: React.ComponentProps) {
- return
+ return ;
}
function SelectValue({
...props
}: React.ComponentProps) {
- return
+ return ;
}
function SelectTrigger({
@@ -30,7 +30,7 @@ function SelectTrigger({
children,
...props
}: React.ComponentProps & {
- size?: "sm" | "default"
+ size?: "sm" | "default";
}) {
return (
@@ -47,7 +47,7 @@ function SelectTrigger({
- )
+ );
}
function SelectContent({
@@ -64,7 +64,7 @@ function SelectContent({
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
- className
+ className,
)}
position={position}
{...props}
@@ -74,7 +74,7 @@ function SelectContent({
className={cn(
"p-1",
position === "popper" &&
- "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+ "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
)}
>
{children}
@@ -82,7 +82,7 @@ function SelectContent({
- )
+ );
}
function SelectLabel({
@@ -95,7 +95,7 @@ function SelectLabel({
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
{...props}
/>
- )
+ );
}
function SelectItem({
@@ -108,7 +108,7 @@ function SelectItem({
data-slot="select-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
- className
+ className,
)}
{...props}
>
@@ -119,7 +119,7 @@ function SelectItem({
{children}
- )
+ );
}
function SelectSeparator({
@@ -132,7 +132,7 @@ function SelectSeparator({
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
{...props}
/>
- )
+ );
}
function SelectScrollUpButton({
@@ -144,13 +144,13 @@ function SelectScrollUpButton({
data-slot="select-scroll-up-button"
className={cn(
"flex cursor-default items-center justify-center py-1",
- className
+ className,
)}
{...props}
>
- )
+ );
}
function SelectScrollDownButton({
@@ -162,13 +162,13 @@ function SelectScrollDownButton({
data-slot="select-scroll-down-button"
className={cn(
"flex cursor-default items-center justify-center py-1",
- className
+ className,
)}
{...props}
>
- )
+ );
}
export {
@@ -182,4 +182,4 @@ export {
SelectSeparator,
SelectTrigger,
SelectValue,
-}
+};
diff --git a/packages/ui/src/components/separator.tsx b/packages/ui/src/components/separator.tsx
index 4e9594c..02ee894 100644
--- a/packages/ui/src/components/separator.tsx
+++ b/packages/ui/src/components/separator.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import { cn } from "@workspace/ui/lib/utils"
+import { cn } from "@workspace/ui/lib/utils";
function Separator({
className,
@@ -18,11 +18,11 @@ function Separator({
orientation={orientation}
className={cn(
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
-export { Separator }
+export { Separator };
diff --git a/packages/ui/src/components/sheet.tsx b/packages/ui/src/components/sheet.tsx
index 02c8b30..7ccc51a 100644
--- a/packages/ui/src/components/sheet.tsx
+++ b/packages/ui/src/components/sheet.tsx
@@ -1,31 +1,31 @@
-"use client"
+"use client";
-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
-import { cn } from "@workspace/ui/lib/utils"
+import { cn } from "@workspace/ui/lib/utils";
function Sheet({ ...props }: React.ComponentProps) {
- return
+ return ;
}
function SheetTrigger({
...props
}: React.ComponentProps) {
- return
+ return ;
}
function SheetClose({
...props
}: React.ComponentProps) {
- return
+ return ;
}
function SheetPortal({
...props
}: React.ComponentProps) {
- return
+ return ;
}
function SheetOverlay({
@@ -37,11 +37,11 @@ function SheetOverlay({
data-slot="sheet-overlay"
className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
- className
+ className,
)}
{...props}
/>
- )
+ );
}
function SheetContent({
@@ -50,7 +50,7 @@ function SheetContent({
side = "right",
...props
}: React.ComponentProps & {
- side?: "top" | "right" | "bottom" | "left"
+ side?: "top" | "right" | "bottom" | "left";
}) {
return (
@@ -67,7 +67,7 @@ function SheetContent({
"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
side === "bottom" &&
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
- className
+ className,
)}
{...props}
>
@@ -78,7 +78,7 @@ function SheetContent({
- )
+ );
}
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -88,7 +88,7 @@ function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
className={cn("flex flex-col gap-1.5 p-4", className)}
{...props}
/>
- )
+ );
}
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -98,7 +98,7 @@ function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
{...props}
/>
- )
+ );
}
function SheetTitle({
@@ -111,7 +111,7 @@ function SheetTitle({
className={cn("text-foreground font-semibold", className)}
{...props}
/>
- )
+ );
}
function SheetDescription({
@@ -124,7 +124,7 @@ function SheetDescription({
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
- )
+ );
}
export {
@@ -136,4 +136,4 @@ export {
SheetFooter,
SheetTitle,
SheetDescription,
-}
+};
diff --git a/packages/ui/src/components/sidebar.tsx b/packages/ui/src/components/sidebar.tsx
index 578ff4d..ccd3c72 100644
--- a/packages/ui/src/components/sidebar.tsx
+++ b/packages/ui/src/components/sidebar.tsx
@@ -1,56 +1,56 @@
-"use client"
-
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, VariantProps } from "class-variance-authority"
-import { PanelLeftIcon } from "lucide-react"
-
-import { useIsMobile } from "@workspace/ui/hooks/use-mobile"
-import { cn } from "@workspace/ui/lib/utils"
-import { Button } from "@workspace/ui/components/button"
-import { Input } from "@workspace/ui/components/input"
-import { Separator } from "@workspace/ui/components/separator"
+"use client";
+
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, VariantProps } from "class-variance-authority";
+import { PanelLeftIcon } from "lucide-react";
+
+import { useIsMobile } from "@workspace/ui/hooks/use-mobile";
+import { cn } from "@workspace/ui/lib/utils";
+import { Button } from "@workspace/ui/components/button";
+import { Input } from "@workspace/ui/components/input";
+import { Separator } from "@workspace/ui/components/separator";
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
-} from "@workspace/ui/components/sheet"
-import { Skeleton } from "@workspace/ui/components/skeleton"
+} from "@workspace/ui/components/sheet";
+import { Skeleton } from "@workspace/ui/components/skeleton";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
-} from "@workspace/ui/components/tooltip"
+} from "@workspace/ui/components/tooltip";
-const SIDEBAR_COOKIE_NAME = "sidebar_state"
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = "16rem"
-const SIDEBAR_WIDTH_MOBILE = "18rem"
-const SIDEBAR_WIDTH_ICON = "3rem"
-const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
type SidebarContextProps = {
- state: "expanded" | "collapsed"
- open: boolean
- setOpen: (open: boolean) => void
- openMobile: boolean
- setOpenMobile: (open: boolean) => void
- isMobile: boolean
- toggleSidebar: () => void
-}
+ state: "expanded" | "collapsed";
+ open: boolean;
+ setOpen: (open: boolean) => void;
+ openMobile: boolean;
+ setOpenMobile: (open: boolean) => void;
+ isMobile: boolean;
+ toggleSidebar: () => void;
+};
-const SidebarContext = React.createContext(null)
+const SidebarContext = React.createContext(null);
function useSidebar() {
- const context = React.useContext(SidebarContext)
+ const context = React.useContext(SidebarContext);
if (!context) {
- throw new Error("useSidebar must be used within a SidebarProvider.")
+ throw new Error("useSidebar must be used within a SidebarProvider.");
}
- return context
+ return context;
}
function SidebarProvider({
@@ -62,36 +62,36 @@ function SidebarProvider({
children,
...props
}: React.ComponentProps<"div"> & {
- defaultOpen?: boolean
- open?: boolean
- onOpenChange?: (open: boolean) => void
+ defaultOpen?: boolean;
+ open?: boolean;
+ onOpenChange?: (open: boolean) => void;
}) {
- const isMobile = useIsMobile()
- const [openMobile, setOpenMobile] = React.useState(false)
+ const isMobile = useIsMobile();
+ const [openMobile, setOpenMobile] = React.useState(false);
// This is the internal state of the sidebar.
// We use openProp and setOpenProp for control from outside the component.
- const [_open, _setOpen] = React.useState(defaultOpen)
- const open = openProp ?? _open
+ const [_open, _setOpen] = React.useState(defaultOpen);
+ const open = openProp ?? _open;
const setOpen = React.useCallback(
(value: boolean | ((value: boolean) => boolean)) => {
- const openState = typeof value === "function" ? value(open) : value
+ const openState = typeof value === "function" ? value(open) : value;
if (setOpenProp) {
- setOpenProp(openState)
+ setOpenProp(openState);
} else {
- _setOpen(openState)
+ _setOpen(openState);
}
// This sets the cookie to keep the sidebar state.
- document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+ document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
},
- [setOpenProp, open]
- )
+ [setOpenProp, open],
+ );
// Helper to toggle the sidebar.
const toggleSidebar = React.useCallback(() => {
- return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
- }, [isMobile, setOpen, setOpenMobile])
+ return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+ }, [isMobile, setOpen, setOpenMobile]);
// Adds a keyboard shortcut to toggle the sidebar.
React.useEffect(() => {
@@ -100,18 +100,18 @@ function SidebarProvider({
event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
(event.metaKey || event.ctrlKey)
) {
- event.preventDefault()
- toggleSidebar()
+ event.preventDefault();
+ toggleSidebar();
}
- }
+ };
- window.addEventListener("keydown", handleKeyDown)
- return () => window.removeEventListener("keydown", handleKeyDown)
- }, [toggleSidebar])
+ window.addEventListener("keydown", handleKeyDown);
+ return () => window.removeEventListener("keydown", handleKeyDown);
+ }, [toggleSidebar]);
// We add a state so that we can do data-state="expanded" or "collapsed".
// This makes it easier to style the sidebar with Tailwind classes.
- const state = open ? "expanded" : "collapsed"
+ const state = open ? "expanded" : "collapsed";
const contextValue = React.useMemo(
() => ({
@@ -123,8 +123,8 @@ function SidebarProvider({
setOpenMobile,
toggleSidebar,
}),
- [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
- )
+ [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+ );
return (
@@ -140,7 +140,7 @@ function SidebarProvider({
}
className={cn(
"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
- className
+ className,
)}
{...props}
>
@@ -148,7 +148,7 @@ function SidebarProvider({
- )
+ );
}
function Sidebar({
@@ -159,11 +159,11 @@ function Sidebar({
children,
...props
}: React.ComponentProps<"div"> & {
- side?: "left" | "right"
- variant?: "sidebar" | "floating" | "inset"
- collapsible?: "offcanvas" | "icon" | "none"
+ side?: "left" | "right";
+ variant?: "sidebar" | "floating" | "inset";
+ collapsible?: "offcanvas" | "icon" | "none";
}) {
- const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
if (collapsible === "none") {
return (
@@ -171,13 +171,13 @@ function Sidebar({
data-slot="sidebar"
className={cn(
"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
- className
+ className,
)}
{...props}
>
{children}
- )
+ );
}
if (isMobile) {
@@ -202,7 +202,7 @@ function Sidebar({
{children}
- )
+ );
}
return (
@@ -223,7 +223,7 @@ function Sidebar({
"group-data-[side=right]:rotate-180",
variant === "floating" || variant === "inset"
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
- : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+ : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
)}
/>
@@ -250,7 +250,7 @@ function Sidebar({
- )
+ );
}
function SidebarTrigger({
@@ -258,7 +258,7 @@ function SidebarTrigger({
onClick,
...props
}: React.ComponentProps) {
- const { toggleSidebar } = useSidebar()
+ const { toggleSidebar } = useSidebar();
return (
- )
+ );
}
function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
- const { toggleSidebar } = useSidebar()
+ const { toggleSidebar } = useSidebar();
return (