svg]:rotate-180`,
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
className
)}
captionLayout={captionLayout}
+ locale={locale}
formatters={{
formatMonthDropdown: (date) =>
- date.toLocaleString("default", { month: "short" }),
+ date.toLocaleString(locale?.code, { month: "short" }),
...formatters,
}}
classNames={{
root: cn("w-fit", defaultClassNames.root),
months: cn(
- "flex gap-4 flex-col md:flex-row relative",
+ "relative flex flex-col gap-4 md:flex-row",
defaultClassNames.months
),
- month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+ month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
nav: cn(
- "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+ "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
defaultClassNames.nav
),
button_previous: cn(
buttonVariants({ variant: buttonVariant }),
- "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+ "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
defaultClassNames.button_previous
),
button_next: cn(
buttonVariants({ variant: buttonVariant }),
- "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+ "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
defaultClassNames.button_next
),
month_caption: cn(
- "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+ "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
defaultClassNames.month_caption
),
dropdowns: cn(
- "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+ "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
defaultClassNames.dropdowns
),
dropdown_root: cn(
- "relative cn-calendar-dropdown-root rounded-(--cell-radius)",
+ "relative rounded-(--cell-radius)",
defaultClassNames.dropdown_root
),
dropdown: cn(
- "absolute bg-popover inset-0 opacity-0",
+ "absolute inset-0 bg-popover opacity-0",
defaultClassNames.dropdown
),
caption_label: cn(
- "select-none font-medium",
+ "font-medium select-none",
captionLayout === "label"
? "text-sm"
- : "cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+ : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
defaultClassNames.caption_label
),
table: "w-full border-collapse",
weekdays: cn("flex", defaultClassNames.weekdays),
weekday: cn(
- "text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none",
+ "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
defaultClassNames.weekday
),
- week: cn("flex w-full mt-2", defaultClassNames.week),
+ week: cn("mt-2 flex w-full", defaultClassNames.week),
week_number_header: cn(
- "select-none w-(--cell-size)",
+ "w-(--cell-size) select-none",
defaultClassNames.week_number_header
),
week_number: cn(
- "text-[0.8rem] select-none text-muted-foreground",
+ "text-[0.8rem] text-muted-foreground select-none",
defaultClassNames.week_number
),
day: cn(
- "relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none",
+ "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
props.showWeekNumber
? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
: "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
defaultClassNames.day
),
range_start: cn(
- "rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate",
+ "relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",
defaultClassNames.range_start
),
range_middle: cn("rounded-none", defaultClassNames.range_middle),
range_end: cn(
- "rounded-r-(--cell-radius) bg-muted relative after:bg-muted-200 after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate",
+ "relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",
defaultClassNames.range_end
),
today: cn(
- "bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none",
+ "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
defaultClassNames.today
),
outside: cn(
@@ -158,7 +161,9 @@ function Calendar({
)
},
- DayButton: CalendarDayButton,
+ DayButton: ({ ...props }) => (
+
+ ),
WeekNumber: ({ children, ...props }) => {
return (
@@ -179,8 +184,9 @@ function CalendarDayButton({
className,
day,
modifiers,
+ locale,
...props
-}: React.ComponentProps) {
+}: React.ComponentProps & { locale?: Partial }) {
const defaultClassNames = getDefaultClassNames()
const ref = React.useRef(null)
@@ -193,7 +199,7 @@ function CalendarDayButton({
ref={ref}
variant="ghost"
size="icon"
- data-day={day.date.toLocaleDateString()}
+ data-day={day.date.toLocaleDateString(locale?.code)}
data-selected-single={
modifiers.selected &&
!modifiers.range_start &&
@@ -204,7 +210,7 @@ function CalendarDayButton({
data-range-end={modifiers.range_end}
data-range-middle={modifiers.range_middle}
className={cn(
- "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70",
+ "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
defaultClassNames.day,
className
)}
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 0cf104f..9bd5a25 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -11,7 +11,10 @@ function Card({
img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
+ className={cn(
+ "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+ className
+ )}
{...props}
/>
)
@@ -22,7 +25,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
) {
return (
)
@@ -44,7 +50,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
return (
)
@@ -67,7 +73,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
return (
)
@@ -77,7 +83,10 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
)
diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx
index 221e158..9deee76 100644
--- a/src/components/ui/carousel.tsx
+++ b/src/components/ui/carousel.tsx
@@ -185,7 +185,7 @@ function CarouselPrevious({
variant={variant}
size={size}
className={cn(
- "rounded-full absolute touch-manipulation",
+ "absolute touch-manipulation rounded-full",
orientation === "horizontal"
? "top-1/2 -left-12 -translate-y-1/2"
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
@@ -195,8 +195,7 @@ function CarouselPrevious({
onClick={scrollPrev}
{...props}
>
-
+
Previous slide
)
@@ -216,7 +215,7 @@ function CarouselNext({
variant={variant}
size={size}
className={cn(
- "rounded-full absolute touch-manipulation",
+ "absolute touch-manipulation rounded-full",
orientation === "horizontal"
? "top-1/2 -right-12 -translate-y-1/2"
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
@@ -226,8 +225,7 @@ function CarouselNext({
onClick={scrollNext}
{...props}
>
-
+
Next slide
)
diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
index 5f31f72..7c2dc84 100644
--- a/src/components/ui/chart.tsx
+++ b/src/components/ui/chart.tsx
@@ -2,21 +2,26 @@
import * as React from "react"
import * as RechartsPrimitive from "recharts"
+import type { TooltipValueType } from "recharts"
import { cn } from "@/lib/utils"
// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const
-export type ChartConfig = {
- [k in string]: {
+const INITIAL_DIMENSION = { width: 320, height: 200 } as const
+type TooltipNameType = number | string
+
+export type ChartConfig = Record<
+ string,
+ {
label?: React.ReactNode
icon?: React.ComponentType
} & (
| { color?: string; theme?: never }
| { color?: never; theme: Record }
)
-}
+>
type ChartContextProps = {
config: ChartConfig
@@ -39,15 +44,20 @@ function ChartContainer({
className,
children,
config,
+ initialDimension = INITIAL_DIMENSION,
...props
}: React.ComponentProps<"div"> & {
config: ChartConfig
children: React.ComponentProps<
typeof RechartsPrimitive.ResponsiveContainer
>["children"]
+ initialDimension?: {
+ width: number
+ height: number
+ }
}) {
const uniqueId = React.useId()
- const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+ const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`
return (
@@ -55,13 +65,15 @@ function ChartContainer({
data-slot="chart"
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",
+ "flex aspect-video justify-center text-xs [&_.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-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.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 [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
className
)}
{...props}
>
-
+
{children}
@@ -71,7 +83,7 @@ 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) {
@@ -88,7 +100,7 @@ ${prefix} [data-chart=${id}] {
${colorConfig
.map(([key, itemConfig]) => {
const color =
- itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+ itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
itemConfig.color
return color ? ` --color-${key}: ${color};` : null
})
@@ -125,7 +137,13 @@ function ChartTooltipContent({
indicator?: "line" | "dot" | "dashed"
nameKey?: string
labelKey?: string
- }) {
+ } & Omit<
+ RechartsPrimitive.DefaultTooltipContentProps<
+ TooltipValueType,
+ TooltipNameType
+ >,
+ "accessibilityLayer"
+ >) {
const { config } = useChart()
const tooltipLabel = React.useMemo(() => {
@@ -134,11 +152,11 @@ function ChartTooltipContent({
}
const [item] = payload
- const key = `${labelKey || item?.dataKey || item?.name || "value"}`
+ 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
+ ? (config[label]?.label ?? label)
: itemConfig?.label
if (labelFormatter) {
@@ -172,22 +190,25 @@ function ChartTooltipContent({
return (
{!nestLabel ? tooltipLabel : null}
{payload
.filter((item) => item.type !== "none")
.map((item, index) => {
- const key = `${nameKey || item.name || item.dataKey || "value"}`
+ const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`
const itemConfig = getPayloadConfigFromPayload(config, item, key)
- const indicatorColor = color || item.payload.fill || item.color
+ 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",
+ "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
indicator === "dot" && "items-center"
)}
>
@@ -228,12 +249,14 @@ function ChartTooltipContent({
{nestLabel ? tooltipLabel : null}
- {itemConfig?.label || item.name}
+ {itemConfig?.label ?? item.name}
- {item.value && (
-
- {item.value.toLocaleString()}
+ {item.value != null && (
+
+ {typeof item.value === "number"
+ ? item.value.toLocaleString()
+ : String(item.value)}
)}
@@ -255,11 +278,10 @@ function ChartLegendContent({
payload,
verticalAlign = "bottom",
nameKey,
-}: React.ComponentProps<"div"> &
- Pick & {
- hideIcon?: boolean
- nameKey?: string
- }) {
+}: React.ComponentProps<"div"> & {
+ hideIcon?: boolean
+ nameKey?: string
+} & RechartsPrimitive.DefaultLegendContentProps) {
const { config } = useChart()
if (!payload?.length) {
@@ -276,15 +298,15 @@ function ChartLegendContent({
>
{payload
.filter((item) => item.type !== "none")
- .map((item) => {
- const key = `${nameKey || item.dataKey || "value"}`
+ .map((item, index) => {
+ 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"
+ "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
)}
>
{itemConfig?.icon && !hideIcon ? (
@@ -338,9 +360,7 @@ function getPayloadConfigFromPayload(
] as string
}
- return configLabelKey in config
- ? config[configLabelKey]
- : config[key as keyof typeof config]
+ return configLabelKey in config ? config[configLabelKey] : config[key]
}
export {
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index b33e19d..6d1d6be 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -14,14 +14,14 @@ function Checkbox({
diff --git a/src/components/ui/combobox.tsx b/src/components/ui/combobox.tsx
new file mode 100644
index 0000000..352afc3
--- /dev/null
+++ b/src/components/ui/combobox.tsx
@@ -0,0 +1,299 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as ComboboxPrimitive } from "@base-ui/react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+ InputGroup,
+ InputGroupAddon,
+ InputGroupButton,
+ InputGroupInput,
+} from "@/components/ui/input-group"
+import { ChevronDownIcon, XIcon, CheckIcon } from "lucide-react"
+
+const Combobox = ComboboxPrimitive.Root
+
+function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
+ return
+}
+
+function ComboboxTrigger({
+ className,
+ children,
+ ...props
+}: ComboboxPrimitive.Trigger.Props) {
+ return (
+
+ {children}
+
+
+ )
+}
+
+function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
+ return (
+ }
+ className={cn(className)}
+ {...props}
+ >
+
+
+ )
+}
+
+function ComboboxInput({
+ className,
+ children,
+ disabled = false,
+ showTrigger = true,
+ showClear = false,
+ ...props
+}: ComboboxPrimitive.Input.Props & {
+ showTrigger?: boolean
+ showClear?: boolean
+}) {
+ return (
+
+ }
+ {...props}
+ />
+
+ {showTrigger && (
+
+
+
+ )}
+ {showClear && }
+
+ {children}
+
+ )
+}
+
+function ComboboxContent({
+ className,
+ side = "bottom",
+ sideOffset = 6,
+ align = "start",
+ alignOffset = 0,
+ anchor,
+ ...props
+}: ComboboxPrimitive.Popup.Props &
+ Pick<
+ ComboboxPrimitive.Positioner.Props,
+ "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
+ >) {
+ return (
+
+
+
+
+
+ )
+}
+
+function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
+ return (
+
+ )
+}
+
+function ComboboxItem({
+ className,
+ children,
+ ...props
+}: ComboboxPrimitive.Item.Props) {
+ return (
+
+ {children}
+
+ }
+ >
+
+
+
+ )
+}
+
+function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
+ return (
+
+ )
+}
+
+function ComboboxLabel({
+ className,
+ ...props
+}: ComboboxPrimitive.GroupLabel.Props) {
+ return (
+
+ )
+}
+
+function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
+ return (
+
+ )
+}
+
+function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
+ return (
+
+ )
+}
+
+function ComboboxSeparator({
+ className,
+ ...props
+}: ComboboxPrimitive.Separator.Props) {
+ return (
+
+ )
+}
+
+function ComboboxChips({
+ className,
+ ...props
+}: React.ComponentPropsWithRef &
+ ComboboxPrimitive.Chips.Props) {
+ return (
+
+ )
+}
+
+function ComboboxChip({
+ className,
+ children,
+ showRemove = true,
+ ...props
+}: ComboboxPrimitive.Chip.Props & {
+ showRemove?: boolean
+}) {
+ return (
+
+ {children}
+ {showRemove && (
+ }
+ className="-ml-1 opacity-50 hover:opacity-100"
+ data-slot="combobox-chip-remove"
+ >
+
+
+ )}
+
+ )
+}
+
+function ComboboxChipsInput({
+ className,
+ ...props
+}: ComboboxPrimitive.Input.Props) {
+ return (
+
+ )
+}
+
+function useComboboxAnchor() {
+ return React.useRef(null)
+}
+
+export {
+ Combobox,
+ ComboboxInput,
+ ComboboxContent,
+ ComboboxList,
+ ComboboxItem,
+ ComboboxGroup,
+ ComboboxLabel,
+ ComboboxCollection,
+ ComboboxEmpty,
+ ComboboxSeparator,
+ ComboboxChips,
+ ComboboxChip,
+ ComboboxChipsInput,
+ ComboboxTrigger,
+ ComboboxValue,
+ useComboboxAnchor,
+}
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index 9dc68a4..4f11297 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -25,7 +25,7 @@ function Command({
{description}
{children}
@@ -68,7 +71,7 @@ function CommandInput({
}: React.ComponentProps) {
return (
-
+
)
@@ -134,7 +140,7 @@ function CommandSeparator({
return (
)
@@ -149,13 +155,13 @@ function CommandItem({
{children}
-
+
)
}
@@ -167,7 +173,10 @@ function CommandShortcut({
return (
)
diff --git a/src/components/ui/context-menu.tsx b/src/components/ui/context-menu.tsx
index 22b1b21..f9506fb 100644
--- a/src/components/ui/context-menu.tsx
+++ b/src/components/ui/context-menu.tsx
@@ -68,7 +68,7 @@ function ContextMenuContent({
@@ -90,7 +90,7 @@ function ContextMenuItem({
data-inset={inset}
data-variant={variant}
className={cn(
- "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+ "group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
className
)}
{...props}
@@ -111,7 +111,7 @@ function ContextMenuSubTrigger({
data-slot="context-menu-sub-trigger"
data-inset={inset}
className={cn(
- "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+ "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
@@ -129,7 +129,7 @@ function ContextMenuSubContent({
return (
)
@@ -139,19 +139,23 @@ function ContextMenuCheckboxItem({
className,
children,
checked,
+ inset,
...props
-}: React.ComponentProps) {
+}: React.ComponentProps & {
+ inset?: boolean
+}) {
return (
-
+
@@ -165,18 +169,22 @@ function ContextMenuCheckboxItem({
function ContextMenuRadioItem({
className,
children,
+ inset,
...props
-}: React.ComponentProps) {
+}: React.ComponentProps & {
+ inset?: boolean
+}) {
return (
-
+
@@ -198,7 +206,10 @@ function ContextMenuLabel({
)
@@ -211,7 +222,7 @@ function ContextMenuSeparator({
return (
)
@@ -224,7 +235,10 @@ function ContextMenuShortcut({
return (
)
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 95e11de..a2c2d0b 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -38,7 +38,10 @@ function DialogOverlay({
return (
)
@@ -58,7 +61,7 @@ function DialogContent({
- |