@schemavaults/ui 0.76.0 → 0.78.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ui/index.d.ts +4 -0
- package/dist/components/ui/index.js +2 -0
- package/dist/components/ui/index.js.map +1 -1
- package/dist/components/ui/multi-select/index.d.ts +3 -0
- package/dist/components/ui/multi-select/index.js +3 -0
- package/dist/components/ui/multi-select/index.js.map +1 -0
- package/dist/components/ui/multi-select/multi-select.d.ts +48 -0
- package/dist/components/ui/multi-select/multi-select.js +153 -0
- package/dist/components/ui/multi-select/multi-select.js.map +1 -0
- package/dist/components/ui/presence-indicator/index.d.ts +2 -0
- package/dist/components/ui/presence-indicator/index.js +2 -0
- package/dist/components/ui/presence-indicator/index.js.map +1 -0
- package/dist/components/ui/presence-indicator/presence-indicator.d.ts +36 -0
- package/dist/components/ui/presence-indicator/presence-indicator.js +95 -0
- package/dist/components/ui/presence-indicator/presence-indicator.js.map +1 -0
- package/package.json +1 -1
|
@@ -62,6 +62,8 @@ export * from "./command";
|
|
|
62
62
|
export type * from "./command";
|
|
63
63
|
export * from "./combobox";
|
|
64
64
|
export type * from "./combobox";
|
|
65
|
+
export * from "./multi-select";
|
|
66
|
+
export type * from "./multi-select";
|
|
65
67
|
export * from "./table";
|
|
66
68
|
export type * from "./table";
|
|
67
69
|
export * from "./datatable";
|
|
@@ -82,6 +84,8 @@ export * from "./description-list";
|
|
|
82
84
|
export type * from "./description-list";
|
|
83
85
|
export * from "./status-blinker";
|
|
84
86
|
export type * from "./status-blinker";
|
|
87
|
+
export * from "./presence-indicator";
|
|
88
|
+
export type * from "./presence-indicator";
|
|
85
89
|
export * from "./context-menu";
|
|
86
90
|
export type * from "./context-menu";
|
|
87
91
|
export * from "./inline-menu";
|
|
@@ -30,6 +30,7 @@ export * from "./alert-dialog";
|
|
|
30
30
|
export * from "./popover";
|
|
31
31
|
export * from "./command";
|
|
32
32
|
export * from "./combobox";
|
|
33
|
+
export * from "./multi-select";
|
|
33
34
|
export * from "./table";
|
|
34
35
|
export * from "./datatable";
|
|
35
36
|
export * from "./checkbox";
|
|
@@ -40,6 +41,7 @@ export * from "./skeleton";
|
|
|
40
41
|
export * from "./key-value-with-skeleton";
|
|
41
42
|
export * from "./description-list";
|
|
42
43
|
export * from "./status-blinker";
|
|
44
|
+
export * from "./presence-indicator";
|
|
43
45
|
export * from "./context-menu";
|
|
44
46
|
export * from "./inline-menu";
|
|
45
47
|
export * from "./stepper";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AAGzB,cAAc,uBAAuB,CAAC;AAGtC,cAAc,aAAa,CAAC;AAG5B,cAAc,eAAe,CAAC;AAG9B,cAAc,SAAS,CAAC;AAGxB,cAAc,WAAW,CAAC;AAG1B,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,cAAc,mBAAmB,CAAC;AAGlC,cAAc,0BAA0B,CAAC;AAGzC,cAAc,UAAU,CAAC;AAGzB,cAAc,SAAS,CAAC;AAGxB,cAAc,kBAAkB,CAAC;AAGjC,cAAc,aAAa,CAAC;AAG5B,cAAc,kCAAkC,CAAC;AAGjD,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAExB,cAAc,WAAW,CAAC;AAG1B,cAAc,YAAY,CAAC;AAG3B,cAAc,mBAAmB,CAAC;AAGlC,cAAc,QAAQ,CAAC;AAGvB,cAAc,QAAQ,CAAC;AAGvB,cAAc,aAAa,CAAC;AAG5B,cAAc,iBAAiB,CAAC;AAGhC,cAAc,WAAW,CAAC;AAG1B,cAAc,mBAAmB,CAAC;AAGlC,cAAc,UAAU,CAAC;AAGzB,cAAc,gBAAgB,CAAC;AAG/B,cAAc,WAAW,CAAC;AAG1B,cAAc,WAAW,CAAC;AAG1B,cAAc,YAAY,CAAC;AAG3B,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC;AAG5B,cAAc,YAAY,CAAC;AAG3B,cAAc,YAAY,CAAC;AAG3B,cAAc,cAAc,CAAC;AAG7B,cAAc,eAAe,CAAC;AAG9B,cAAc,YAAY,CAAC;AAG3B,cAAc,2BAA2B,CAAC;AAG1C,cAAc,oBAAoB,CAAC;AAGnC,cAAc,kBAAkB,CAAC;AAGjC,cAAc,gBAAgB,CAAC;AAG/B,cAAc,eAAe,CAAC;AAG9B,cAAc,WAAW,CAAC;AAG1B,cAAc,gBAAgB,CAAC;AAG/B,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,cAAc,UAAU,CAAC;AAGzB,cAAc,eAAe,CAAC;AAG9B,cAAc,qBAAqB,CAAC;AAGpC,cAAc,oBAAoB,CAAC;AAGnC,cAAc,mBAAmB,CAAC;AAGlC,cAAc,QAAQ,CAAC;AAGvB,cAAc,QAAQ,CAAC;AAGvB,cAAc,UAAU,CAAC;AAGzB,cAAc,UAAU,CAAC;AAGzB,cAAc,gBAAgB,CAAC;AAG/B,cAAc,qBAAqB,CAAC;AAGpC,cAAc,mBAAmB,CAAC;AAGlC,cAAc,SAAS,CAAC;AAGxB,cAAc,cAAc,CAAC;AAG7B,cAAc,cAAc,CAAC;AAG7B,cAAc,OAAO,CAAC;AAGtB,cAAc,eAAe,CAAC;AAG9B,cAAc,WAAW,CAAC;AAG1B,cAAc,UAAU,CAAC;AAGzB,cAAc,eAAe,CAAC;AAG9B,cAAc,aAAa,CAAC;AAG5B,cAAc,YAAY,CAAC;AAG3B,cAAc,UAAU,CAAC;AAGzB,cAAc,gBAAgB,CAAC;AAG/B,cAAc,cAAc,CAAC;AAG7B,cAAc,iBAAiB,CAAC;AAGhC,cAAc,eAAe,CAAC;AAG9B,cAAc,eAAe,CAAC;AAG9B,cAAc,qBAAqB,CAAC;AAGpC,cAAc,WAAW,CAAC;AAG1B,cAAc,UAAU,CAAC;AAGzB,cAAc,QAAQ,CAAC;AAGvB,cAAc,cAAc,CAAC;AAG7B,cAAc,iBAAiB,CAAC;AAGhC,cAAc,aAAa,CAAC;AAG5B,cAAc,gBAAgB,CAAC;AAG/B,cAAc,gBAAgB,CAAC;AAG/B,cAAc,oBAAoB,CAAC;AAGnC,cAAc,aAAa,CAAC;AAG5B,cAAc,aAAa,CAAC;AAG5B,cAAc,qBAAqB,CAAC;AAGpC,cAAc,kBAAkB,CAAC;AAGjC,cAAc,aAAa,CAAC;AAG5B,cAAc,YAAY,CAAC;AAG3B,cAAc,aAAa,CAAC;AAG5B,cAAc,0BAA0B,CAAC;AAGzC,cAAc,qBAAqB,CAAC;AAGpC,cAAc,YAAY,CAAC;AAG3B,cAAc,eAAe,CAAC;AAG9B,cAAc,qBAAqB,CAAC;AAGpC,cAAc,eAAe,CAAC;AAG9B,cAAc,QAAQ,CAAC;AAGvB,cAAc,qBAAqB,CAAC;AAGpC,cAAc,iBAAiB,CAAC;AAGhC,cAAc,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AAGzB,cAAc,uBAAuB,CAAC;AAGtC,cAAc,aAAa,CAAC;AAG5B,cAAc,eAAe,CAAC;AAG9B,cAAc,SAAS,CAAC;AAGxB,cAAc,WAAW,CAAC;AAG1B,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,cAAc,mBAAmB,CAAC;AAGlC,cAAc,0BAA0B,CAAC;AAGzC,cAAc,UAAU,CAAC;AAGzB,cAAc,SAAS,CAAC;AAGxB,cAAc,kBAAkB,CAAC;AAGjC,cAAc,aAAa,CAAC;AAG5B,cAAc,kCAAkC,CAAC;AAGjD,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAExB,cAAc,WAAW,CAAC;AAG1B,cAAc,YAAY,CAAC;AAG3B,cAAc,mBAAmB,CAAC;AAGlC,cAAc,QAAQ,CAAC;AAGvB,cAAc,QAAQ,CAAC;AAGvB,cAAc,aAAa,CAAC;AAG5B,cAAc,iBAAiB,CAAC;AAGhC,cAAc,WAAW,CAAC;AAG1B,cAAc,mBAAmB,CAAC;AAGlC,cAAc,UAAU,CAAC;AAGzB,cAAc,gBAAgB,CAAC;AAG/B,cAAc,WAAW,CAAC;AAG1B,cAAc,WAAW,CAAC;AAG1B,cAAc,YAAY,CAAC;AAG3B,cAAc,gBAAgB,CAAC;AAG/B,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC;AAG5B,cAAc,YAAY,CAAC;AAG3B,cAAc,YAAY,CAAC;AAG3B,cAAc,cAAc,CAAC;AAG7B,cAAc,eAAe,CAAC;AAG9B,cAAc,YAAY,CAAC;AAG3B,cAAc,2BAA2B,CAAC;AAG1C,cAAc,oBAAoB,CAAC;AAGnC,cAAc,kBAAkB,CAAC;AAGjC,cAAc,sBAAsB,CAAC;AAGrC,cAAc,gBAAgB,CAAC;AAG/B,cAAc,eAAe,CAAC;AAG9B,cAAc,WAAW,CAAC;AAG1B,cAAc,gBAAgB,CAAC;AAG/B,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,cAAc,UAAU,CAAC;AAGzB,cAAc,eAAe,CAAC;AAG9B,cAAc,qBAAqB,CAAC;AAGpC,cAAc,oBAAoB,CAAC;AAGnC,cAAc,mBAAmB,CAAC;AAGlC,cAAc,QAAQ,CAAC;AAGvB,cAAc,QAAQ,CAAC;AAGvB,cAAc,UAAU,CAAC;AAGzB,cAAc,UAAU,CAAC;AAGzB,cAAc,gBAAgB,CAAC;AAG/B,cAAc,qBAAqB,CAAC;AAGpC,cAAc,mBAAmB,CAAC;AAGlC,cAAc,SAAS,CAAC;AAGxB,cAAc,cAAc,CAAC;AAG7B,cAAc,cAAc,CAAC;AAG7B,cAAc,OAAO,CAAC;AAGtB,cAAc,eAAe,CAAC;AAG9B,cAAc,WAAW,CAAC;AAG1B,cAAc,UAAU,CAAC;AAGzB,cAAc,eAAe,CAAC;AAG9B,cAAc,aAAa,CAAC;AAG5B,cAAc,YAAY,CAAC;AAG3B,cAAc,UAAU,CAAC;AAGzB,cAAc,gBAAgB,CAAC;AAG/B,cAAc,cAAc,CAAC;AAG7B,cAAc,iBAAiB,CAAC;AAGhC,cAAc,eAAe,CAAC;AAG9B,cAAc,eAAe,CAAC;AAG9B,cAAc,qBAAqB,CAAC;AAGpC,cAAc,WAAW,CAAC;AAG1B,cAAc,UAAU,CAAC;AAGzB,cAAc,QAAQ,CAAC;AAGvB,cAAc,cAAc,CAAC;AAG7B,cAAc,iBAAiB,CAAC;AAGhC,cAAc,aAAa,CAAC;AAG5B,cAAc,gBAAgB,CAAC;AAG/B,cAAc,gBAAgB,CAAC;AAG/B,cAAc,oBAAoB,CAAC;AAGnC,cAAc,aAAa,CAAC;AAG5B,cAAc,aAAa,CAAC;AAG5B,cAAc,qBAAqB,CAAC;AAGpC,cAAc,kBAAkB,CAAC;AAGjC,cAAc,aAAa,CAAC;AAG5B,cAAc,YAAY,CAAC;AAG3B,cAAc,aAAa,CAAC;AAG5B,cAAc,0BAA0B,CAAC;AAGzC,cAAc,qBAAqB,CAAC;AAGpC,cAAc,YAAY,CAAC;AAG3B,cAAc,eAAe,CAAC;AAG9B,cAAc,qBAAqB,CAAC;AAGpC,cAAc,eAAe,CAAC;AAG9B,cAAc,QAAQ,CAAC;AAGvB,cAAc,qBAAqB,CAAC;AAGpC,cAAc,iBAAiB,CAAC;AAGhC,cAAc,eAAe,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/multi-select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,0BAA0B,EAC1B,qBAAqB,EACrB,kBAAkB,EAClB,0BAA0B,GAC3B,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,WAAW,IAAI,OAAO,EAAE,MAAM,gBAAgB,CAAC"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { type ButtonHTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
|
|
2
|
+
import { type VariantProps } from "class-variance-authority";
|
|
3
|
+
export declare const multiSelectVariantIds: readonly ["default", "outline", "ghost"];
|
|
4
|
+
export type MultiSelectVariantId = (typeof multiSelectVariantIds)[number];
|
|
5
|
+
export declare const multiSelectSizeIds: readonly ["sm", "default", "lg"];
|
|
6
|
+
export type MultiSelectSizeId = (typeof multiSelectSizeIds)[number];
|
|
7
|
+
export declare const multiSelectBadgeVariantIds: readonly ["default", "secondary", "outline", "destructive"];
|
|
8
|
+
export type MultiSelectBadgeVariantId = (typeof multiSelectBadgeVariantIds)[number];
|
|
9
|
+
export declare const multiSelectTriggerVariants: (props?: ({
|
|
10
|
+
variant?: "default" | "outline" | "ghost" | null | undefined;
|
|
11
|
+
size?: "sm" | "default" | "lg" | null | undefined;
|
|
12
|
+
fullWidth?: boolean | null | undefined;
|
|
13
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
14
|
+
export interface MultiSelectOption {
|
|
15
|
+
value: string;
|
|
16
|
+
label: string;
|
|
17
|
+
description?: string;
|
|
18
|
+
keywords?: readonly string[];
|
|
19
|
+
disabled?: boolean;
|
|
20
|
+
icon?: ReactNode;
|
|
21
|
+
}
|
|
22
|
+
export interface MultiSelectProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value" | "defaultValue" | "onChange">, VariantProps<typeof multiSelectTriggerVariants> {
|
|
23
|
+
options: readonly MultiSelectOption[];
|
|
24
|
+
value?: readonly string[];
|
|
25
|
+
defaultValue?: readonly string[];
|
|
26
|
+
onValueChange?: (value: readonly string[]) => void;
|
|
27
|
+
placeholder?: ReactNode;
|
|
28
|
+
searchPlaceholder?: string;
|
|
29
|
+
emptyMessage?: ReactNode;
|
|
30
|
+
contentClassName?: string;
|
|
31
|
+
triggerClassName?: string;
|
|
32
|
+
badgeClassName?: string;
|
|
33
|
+
badgeVariant?: MultiSelectBadgeVariantId;
|
|
34
|
+
/** Maximum number of selected items rendered as badges before a +N overflow chip. */
|
|
35
|
+
maxDisplay?: number;
|
|
36
|
+
/** Maximum number of items the user may select. Further selections become no-ops. */
|
|
37
|
+
maxSelected?: number;
|
|
38
|
+
clearable?: boolean;
|
|
39
|
+
disabled?: boolean;
|
|
40
|
+
/** Close the popover after each selection. Defaults to false (multi-pick mode). */
|
|
41
|
+
closeOnSelect?: boolean;
|
|
42
|
+
align?: "start" | "center" | "end";
|
|
43
|
+
ref?: Ref<HTMLButtonElement>;
|
|
44
|
+
}
|
|
45
|
+
export declare function MultiSelect({ options, value: controlledValue, defaultValue, onValueChange, placeholder, searchPlaceholder, emptyMessage, variant, size, fullWidth, contentClassName, triggerClassName, badgeClassName, badgeVariant, className, maxDisplay, maxSelected, clearable, disabled, closeOnSelect, align, ref, ...buttonProps }: MultiSelectProps): ReactElement;
|
|
46
|
+
export declare namespace MultiSelect {
|
|
47
|
+
var displayName: string;
|
|
48
|
+
}
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import { useCallback, useId, useMemo, useState, } from "react";
|
|
4
|
+
import { cva } from "class-variance-authority";
|
|
5
|
+
import { Check, ChevronsUpDown, X } from "lucide-react";
|
|
6
|
+
import { cn } from "../../../lib/utils";
|
|
7
|
+
import { Badge } from "../../ui/badge";
|
|
8
|
+
import { Popover, PopoverContent, PopoverTrigger, } from "../../ui/popover";
|
|
9
|
+
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "../../ui/command";
|
|
10
|
+
export const multiSelectVariantIds = [
|
|
11
|
+
"default",
|
|
12
|
+
"outline",
|
|
13
|
+
"ghost",
|
|
14
|
+
];
|
|
15
|
+
export const multiSelectSizeIds = [
|
|
16
|
+
"sm",
|
|
17
|
+
"default",
|
|
18
|
+
"lg",
|
|
19
|
+
];
|
|
20
|
+
export const multiSelectBadgeVariantIds = [
|
|
21
|
+
"default",
|
|
22
|
+
"secondary",
|
|
23
|
+
"outline",
|
|
24
|
+
"destructive",
|
|
25
|
+
];
|
|
26
|
+
export const multiSelectTriggerVariants = cva("group/trigger inline-flex min-h-10 items-center justify-between gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[placeholder=true]:text-muted-foreground", {
|
|
27
|
+
variants: {
|
|
28
|
+
variant: {
|
|
29
|
+
default: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
|
30
|
+
outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
|
|
31
|
+
ghost: "border border-transparent bg-transparent hover:bg-accent hover:text-accent-foreground",
|
|
32
|
+
},
|
|
33
|
+
size: {
|
|
34
|
+
sm: "min-h-8 px-2 py-1 text-xs",
|
|
35
|
+
default: "min-h-10 px-3 py-1.5 text-sm",
|
|
36
|
+
lg: "min-h-11 px-4 py-2 text-base",
|
|
37
|
+
},
|
|
38
|
+
fullWidth: {
|
|
39
|
+
true: "w-full",
|
|
40
|
+
false: "",
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
defaultVariants: {
|
|
44
|
+
variant: "default",
|
|
45
|
+
size: "default",
|
|
46
|
+
fullWidth: false,
|
|
47
|
+
},
|
|
48
|
+
});
|
|
49
|
+
function arraysHaveSameValues(a, b) {
|
|
50
|
+
if (a.length !== b.length)
|
|
51
|
+
return false;
|
|
52
|
+
const set = new Set(a);
|
|
53
|
+
for (const value of b) {
|
|
54
|
+
if (!set.has(value))
|
|
55
|
+
return false;
|
|
56
|
+
}
|
|
57
|
+
return true;
|
|
58
|
+
}
|
|
59
|
+
export function MultiSelect({ options, value: controlledValue, defaultValue, onValueChange, placeholder = "Select options...", searchPlaceholder = "Search...", emptyMessage = "No results found.", variant, size, fullWidth, contentClassName, triggerClassName, badgeClassName, badgeVariant = "secondary", className, maxDisplay, maxSelected, clearable = false, disabled = false, closeOnSelect = false, align = "start", ref, ...buttonProps }) {
|
|
60
|
+
const reactId = useId();
|
|
61
|
+
const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? []);
|
|
62
|
+
const [open, setOpen] = useState(false);
|
|
63
|
+
const isControlled = controlledValue !== undefined;
|
|
64
|
+
const selectedValues = isControlled
|
|
65
|
+
? controlledValue
|
|
66
|
+
: uncontrolledValue;
|
|
67
|
+
const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);
|
|
68
|
+
const selectedOptions = useMemo(() => selectedValues
|
|
69
|
+
.map((selectedValue) => options.find((option) => option.value === selectedValue))
|
|
70
|
+
.filter((option) => option !== undefined), [options, selectedValues]);
|
|
71
|
+
const commitValue = useCallback((next) => {
|
|
72
|
+
if (arraysHaveSameValues(next, selectedValues))
|
|
73
|
+
return;
|
|
74
|
+
if (!isControlled) {
|
|
75
|
+
setUncontrolledValue(next);
|
|
76
|
+
}
|
|
77
|
+
onValueChange?.(next);
|
|
78
|
+
}, [isControlled, onValueChange, selectedValues]);
|
|
79
|
+
const handleToggle = useCallback((next) => {
|
|
80
|
+
const isSelected = selectedSet.has(next);
|
|
81
|
+
let nextValues;
|
|
82
|
+
if (isSelected) {
|
|
83
|
+
nextValues = selectedValues.filter((v) => v !== next);
|
|
84
|
+
}
|
|
85
|
+
else {
|
|
86
|
+
if (maxSelected !== undefined &&
|
|
87
|
+
selectedValues.length >= maxSelected) {
|
|
88
|
+
return;
|
|
89
|
+
}
|
|
90
|
+
nextValues = [...selectedValues, next];
|
|
91
|
+
}
|
|
92
|
+
commitValue(nextValues);
|
|
93
|
+
if (closeOnSelect) {
|
|
94
|
+
setOpen(false);
|
|
95
|
+
}
|
|
96
|
+
}, [closeOnSelect, commitValue, maxSelected, selectedSet, selectedValues]);
|
|
97
|
+
const handleClearAll = useCallback((event) => {
|
|
98
|
+
event?.stopPropagation();
|
|
99
|
+
event?.preventDefault();
|
|
100
|
+
commitValue([]);
|
|
101
|
+
}, [commitValue]);
|
|
102
|
+
const handleRemoveBadge = useCallback((event, optionValue) => {
|
|
103
|
+
event.stopPropagation();
|
|
104
|
+
event.preventDefault();
|
|
105
|
+
commitValue(selectedValues.filter((v) => v !== optionValue));
|
|
106
|
+
}, [commitValue, selectedValues]);
|
|
107
|
+
const visibleSelected = useMemo(() => {
|
|
108
|
+
if (maxDisplay === undefined)
|
|
109
|
+
return selectedOptions;
|
|
110
|
+
return selectedOptions.slice(0, maxDisplay);
|
|
111
|
+
}, [maxDisplay, selectedOptions]);
|
|
112
|
+
const overflowCount = useMemo(() => {
|
|
113
|
+
if (maxDisplay === undefined)
|
|
114
|
+
return 0;
|
|
115
|
+
return Math.max(0, selectedOptions.length - maxDisplay);
|
|
116
|
+
}, [maxDisplay, selectedOptions.length]);
|
|
117
|
+
const showClearControl = clearable && !disabled && selectedValues.length > 0;
|
|
118
|
+
const isLimitReached = maxSelected !== undefined && selectedValues.length >= maxSelected;
|
|
119
|
+
const hasSelection = selectedValues.length > 0;
|
|
120
|
+
return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { ref: ref, type: "button", role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", "aria-controls": `${reactId}-listbox`, "data-placeholder": hasSelection ? "false" : "true", disabled: disabled, className: cn(multiSelectTriggerVariants({ variant, size, fullWidth }), triggerClassName, className), ...buttonProps, children: [_jsx("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1 text-left", children: hasSelection ? (_jsxs(_Fragment, { children: [visibleSelected.map((option) => (_jsxs(Badge, { variant: badgeVariant, className: cn("max-w-full gap-1 pr-1", badgeClassName), children: [option.icon ? (_jsx("span", { className: "inline-flex shrink-0 items-center", "aria-hidden": "true", children: option.icon })) : null, _jsx("span", { className: "truncate", children: option.label }), !disabled ? (_jsx("span", { role: "button", tabIndex: -1, "aria-label": `Remove ${option.label}`, onClick: (event) => handleRemoveBadge(event, option.value), onPointerDown: (event) => {
|
|
121
|
+
event.stopPropagation();
|
|
122
|
+
}, onKeyDown: (event) => {
|
|
123
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
124
|
+
event.preventDefault();
|
|
125
|
+
event.stopPropagation();
|
|
126
|
+
handleRemoveBadge(event, option.value);
|
|
127
|
+
}
|
|
128
|
+
}, className: "-mr-0.5 ml-0.5 inline-flex h-4 w-4 cursor-pointer items-center justify-center rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", children: _jsx(X, { className: "h-3 w-3", "aria-hidden": "true" }) })) : null] }, option.value))), overflowCount > 0 ? (_jsxs(Badge, { variant: "outline", className: cn("font-medium", badgeClassName), children: ["+", overflowCount, " more"] })) : null] })) : (_jsx("span", { className: "truncate text-muted-foreground", children: placeholder })) }), _jsxs("span", { className: "ml-2 flex shrink-0 items-center gap-1", children: [showClearControl ? (_jsx("span", { role: "button", tabIndex: -1, "aria-label": "Clear all selected", onClick: handleClearAll, onPointerDown: (event) => {
|
|
129
|
+
event.stopPropagation();
|
|
130
|
+
}, onKeyDown: (event) => {
|
|
131
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
132
|
+
event.preventDefault();
|
|
133
|
+
event.stopPropagation();
|
|
134
|
+
handleClearAll();
|
|
135
|
+
}
|
|
136
|
+
}, className: "inline-flex h-4 w-4 cursor-pointer items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", children: _jsx(X, { className: "h-4 w-4", "aria-hidden": "true" }) })) : null, _jsx(ChevronsUpDown, { className: "h-4 w-4 opacity-50", "aria-hidden": "true" })] })] }) }), _jsx(PopoverContent, { align: align, className: cn("w-[var(--radix-popover-trigger-width)] min-w-[12rem] p-0", contentClassName), children: _jsxs(Command, { id: `${reactId}-listbox`, children: [_jsx(CommandInput, { placeholder: searchPlaceholder }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: emptyMessage }), showClearControl ? (_jsxs(_Fragment, { children: [_jsx(CommandGroup, { children: _jsxs(CommandItem, { value: "__multi_select_clear__", keywords: ["clear", "reset", "none"], onSelect: () => {
|
|
137
|
+
handleClearAll();
|
|
138
|
+
}, className: "cursor-pointer gap-2 text-muted-foreground", children: [_jsx(X, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }), _jsx("span", { children: "Clear selection" }), _jsx("span", { className: "ml-auto text-xs", children: selectedValues.length })] }) }), _jsx(CommandSeparator, {})] })) : null, _jsx(CommandGroup, { children: options.map((option) => {
|
|
139
|
+
const isSelected = selectedSet.has(option.value);
|
|
140
|
+
const keywords = [
|
|
141
|
+
option.label,
|
|
142
|
+
...(option.keywords ?? []),
|
|
143
|
+
];
|
|
144
|
+
const itemDisabled = option.disabled || (!isSelected && isLimitReached);
|
|
145
|
+
return (_jsxs(CommandItem, { value: option.value, keywords: keywords, disabled: itemDisabled, onSelect: (currentValue) => {
|
|
146
|
+
handleToggle(currentValue);
|
|
147
|
+
}, className: "cursor-pointer gap-2", children: [_jsx("span", { className: cn("flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border", isSelected
|
|
148
|
+
? "border-primary bg-primary text-primary-foreground"
|
|
149
|
+
: "border-input bg-transparent"), "aria-hidden": "true", children: _jsx(Check, { className: cn("h-3 w-3", isSelected ? "opacity-100" : "opacity-0") }) }), option.icon ? (_jsx("span", { className: "inline-flex shrink-0 items-center", "aria-hidden": "true", children: option.icon })) : null, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate", children: option.label }), option.description ? (_jsx("span", { className: "truncate text-xs text-muted-foreground", children: option.description })) : null] })] }, option.value));
|
|
150
|
+
}) }), maxSelected !== undefined ? (_jsxs("div", { className: "border-t px-3 py-1.5 text-xs text-muted-foreground", children: [selectedValues.length, " / ", maxSelected, " selected"] })) : null] })] }) })] }));
|
|
151
|
+
}
|
|
152
|
+
MultiSelect.displayName = "MultiSelect";
|
|
153
|
+
//# sourceMappingURL=multi-select.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"multi-select.js","sourceRoot":"","sources":["../../../../src/components/ui/multi-select/multi-select.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/presence-indicator/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,iBAAiB,IAAI,OAAO,EAC5B,iBAAiB,EACjB,eAAe,GAChB,MAAM,sBAAsB,CAAC"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import type { HTMLAttributes, ReactElement, Ref } from "react";
|
|
2
|
+
export declare const presenceStatusIds: readonly ["online", "idle", "busy", "away", "dnd", "offline", "invisible"];
|
|
3
|
+
export type PresenceStatusId = (typeof presenceStatusIds)[number];
|
|
4
|
+
export declare const presenceSizeIds: readonly ["xs", "sm", "md", "lg", "xl"];
|
|
5
|
+
export type PresenceSizeId = (typeof presenceSizeIds)[number];
|
|
6
|
+
export interface PresenceIndicatorProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children" | "aria-label"> {
|
|
7
|
+
/** Semantic presence status. Defaults to `"online"`. */
|
|
8
|
+
status?: PresenceStatusId;
|
|
9
|
+
/** Visual size of the dot. Defaults to `"md"`. */
|
|
10
|
+
size?: PresenceSizeId;
|
|
11
|
+
/** Render a soft `ping` animation around the dot. */
|
|
12
|
+
pulse?: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* Render a contrasting ring around the dot. Useful when overlaying the
|
|
15
|
+
* indicator on top of an `Avatar` or coloured surface.
|
|
16
|
+
*/
|
|
17
|
+
bordered?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Render a text label next to the dot. Pass `true` to use the default
|
|
20
|
+
* status label (e.g. `"Online"`), or a string for a custom one.
|
|
21
|
+
*/
|
|
22
|
+
label?: boolean | string;
|
|
23
|
+
/**
|
|
24
|
+
* Accessible label describing the status. Defaults to a humanised version of
|
|
25
|
+
* the `status` (e.g. `"Online"`). Set to `null` to mark the indicator as
|
|
26
|
+
* purely decorative (e.g. when paired with adjacent text that already
|
|
27
|
+
* conveys the status).
|
|
28
|
+
*/
|
|
29
|
+
"aria-label"?: string | null;
|
|
30
|
+
ref?: Ref<HTMLSpanElement>;
|
|
31
|
+
}
|
|
32
|
+
declare function PresenceIndicator({ className, status, size, pulse, bordered, label, ref, "aria-label": ariaLabelProp, ...rest }: PresenceIndicatorProps): ReactElement;
|
|
33
|
+
declare namespace PresenceIndicator {
|
|
34
|
+
var displayName: string;
|
|
35
|
+
}
|
|
36
|
+
export { PresenceIndicator };
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { cn } from "../../../lib/utils";
|
|
4
|
+
export const presenceStatusIds = [
|
|
5
|
+
"online",
|
|
6
|
+
"idle",
|
|
7
|
+
"busy",
|
|
8
|
+
"away",
|
|
9
|
+
"dnd",
|
|
10
|
+
"offline",
|
|
11
|
+
"invisible",
|
|
12
|
+
];
|
|
13
|
+
export const presenceSizeIds = [
|
|
14
|
+
"xs",
|
|
15
|
+
"sm",
|
|
16
|
+
"md",
|
|
17
|
+
"lg",
|
|
18
|
+
"xl",
|
|
19
|
+
];
|
|
20
|
+
const dotColorClasses = {
|
|
21
|
+
online: "bg-green-500",
|
|
22
|
+
idle: "bg-yellow-400",
|
|
23
|
+
busy: "bg-orange-500",
|
|
24
|
+
away: "bg-amber-500",
|
|
25
|
+
dnd: "bg-destructive",
|
|
26
|
+
offline: "bg-muted-foreground/50",
|
|
27
|
+
invisible: "bg-transparent border border-muted-foreground/60",
|
|
28
|
+
};
|
|
29
|
+
const dotSizeClasses = {
|
|
30
|
+
xs: "h-1.5 w-1.5",
|
|
31
|
+
sm: "h-2 w-2",
|
|
32
|
+
md: "h-2.5 w-2.5",
|
|
33
|
+
lg: "h-3 w-3",
|
|
34
|
+
xl: "h-3.5 w-3.5",
|
|
35
|
+
};
|
|
36
|
+
const dndBarSizeClasses = {
|
|
37
|
+
xs: "h-px w-[60%]",
|
|
38
|
+
sm: "h-px w-[60%]",
|
|
39
|
+
md: "h-px w-[60%]",
|
|
40
|
+
lg: "h-[1.5px] w-[60%]",
|
|
41
|
+
xl: "h-[1.5px] w-[60%]",
|
|
42
|
+
};
|
|
43
|
+
const ringSizeClasses = {
|
|
44
|
+
xs: "ring-[1.5px]",
|
|
45
|
+
sm: "ring-2",
|
|
46
|
+
md: "ring-2",
|
|
47
|
+
lg: "ring-2",
|
|
48
|
+
xl: "ring-[2.5px]",
|
|
49
|
+
};
|
|
50
|
+
const labelTextClasses = {
|
|
51
|
+
xs: "text-[10px]",
|
|
52
|
+
sm: "text-xs",
|
|
53
|
+
md: "text-xs",
|
|
54
|
+
lg: "text-sm",
|
|
55
|
+
xl: "text-sm",
|
|
56
|
+
};
|
|
57
|
+
const statusLabels = {
|
|
58
|
+
online: "Online",
|
|
59
|
+
idle: "Idle",
|
|
60
|
+
busy: "Busy",
|
|
61
|
+
away: "Away",
|
|
62
|
+
dnd: "Do not disturb",
|
|
63
|
+
offline: "Offline",
|
|
64
|
+
invisible: "Invisible",
|
|
65
|
+
};
|
|
66
|
+
const pulseColorClasses = {
|
|
67
|
+
online: "bg-green-500",
|
|
68
|
+
idle: "bg-yellow-400",
|
|
69
|
+
busy: "bg-orange-500",
|
|
70
|
+
away: "bg-amber-500",
|
|
71
|
+
dnd: "bg-destructive",
|
|
72
|
+
offline: "bg-muted-foreground/50",
|
|
73
|
+
invisible: "bg-muted-foreground/40",
|
|
74
|
+
};
|
|
75
|
+
function PresenceDot({ status, size, pulse, bordered, }) {
|
|
76
|
+
return (_jsxs("span", { className: "relative inline-flex items-center justify-center", children: [pulse ? (_jsx("span", { "aria-hidden": "true", className: cn("absolute inline-flex h-full w-full rounded-full opacity-75 animate-ping", pulseColorClasses[status], dotSizeClasses[size]) })) : null, _jsx("span", { "data-slot": "presence-indicator-dot", className: cn("relative inline-flex items-center justify-center rounded-full", dotColorClasses[status], dotSizeClasses[size], bordered && cn(ringSizeClasses[size], "ring-background")), children: status === "dnd" ? (_jsx("span", { "aria-hidden": "true", className: cn("block rounded-full bg-destructive-foreground", dndBarSizeClasses[size]) })) : null })] }));
|
|
77
|
+
}
|
|
78
|
+
function PresenceIndicator({ className, status = "online", size = "md", pulse = false, bordered = false, label, ref, "aria-label": ariaLabelProp, ...rest }) {
|
|
79
|
+
const decorative = ariaLabelProp === null;
|
|
80
|
+
const ariaLabel = decorative
|
|
81
|
+
? undefined
|
|
82
|
+
: (ariaLabelProp ?? statusLabels[status]);
|
|
83
|
+
const labelText = label === true
|
|
84
|
+
? statusLabels[status]
|
|
85
|
+
: typeof label === "string"
|
|
86
|
+
? label
|
|
87
|
+
: null;
|
|
88
|
+
if (labelText !== null) {
|
|
89
|
+
return (_jsxs("span", { ref: ref, "data-slot": "presence-indicator", "data-status": status, role: decorative ? undefined : "status", "aria-label": ariaLabel, "aria-hidden": decorative ? true : undefined, className: cn("inline-flex items-center gap-1.5 text-foreground", className), ...rest, children: [_jsx(PresenceDot, { status: status, size: size, pulse: pulse, bordered: bordered }), _jsx("span", { className: cn("font-medium leading-none", labelTextClasses[size]), children: labelText })] }));
|
|
90
|
+
}
|
|
91
|
+
return (_jsx("span", { ref: ref, "data-slot": "presence-indicator", "data-status": status, role: decorative ? undefined : "status", "aria-label": ariaLabel, "aria-hidden": decorative ? true : undefined, className: cn("inline-flex shrink-0 items-center justify-center", className), ...rest, children: _jsx(PresenceDot, { status: status, size: size, pulse: pulse, bordered: bordered }) }));
|
|
92
|
+
}
|
|
93
|
+
PresenceIndicator.displayName = "PresenceIndicator";
|
|
94
|
+
export { PresenceIndicator };
|
|
95
|
+
//# sourceMappingURL=presence-indicator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"presence-indicator.js","sourceRoot":"","sources":["../../../../src/components/ui/presence-indicator/presence-indicator.tsx"],"names":[],"mappings":"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"}
|