lecom-ui 5.3.5 → 5.3.6
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.
|
@@ -2,19 +2,23 @@ import * as React from 'react';
|
|
|
2
2
|
import { cn } from '../../lib/utils.js';
|
|
3
3
|
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
4
4
|
import { cva } from 'class-variance-authority';
|
|
5
|
-
import { ChevronDown } from 'lucide-react';
|
|
5
|
+
import { ChevronRight, ChevronDown } from 'lucide-react';
|
|
6
6
|
|
|
7
7
|
const accordionVariants = cva(
|
|
8
8
|
"flex flex-1 items-center gap-4 transition-all text-left outline-none w-full",
|
|
9
9
|
{
|
|
10
10
|
variants: {
|
|
11
11
|
variant: {
|
|
12
|
-
default: "border-t border-grey-400 text-grey-950 hover:bg-grey-200 hover:rounded-lg hover:border-t-transparent hover:ring-0 focus:hover:ring-0 active:bg-grey-400 active:border-transparent active:ring-0 disabled:text-grey-300 disabled:bg-transparent disabled:cursor-not-allowed disabled:hover:bg-none disabled:hover:rounded-none disabled:hover:border-grey-400 disabled:focus:ring-0 disabled:active:bg-transparent"
|
|
12
|
+
default: "border-t border-grey-400 text-grey-950 hover:bg-grey-200 hover:rounded-lg hover:border-t-transparent hover:ring-0 focus:hover:ring-0 active:bg-grey-400 active:border-transparent active:ring-0 disabled:text-grey-300 disabled:bg-transparent disabled:cursor-not-allowed disabled:hover:bg-none disabled:hover:rounded-none disabled:hover:border-grey-400 disabled:focus:ring-0 disabled:active:bg-transparent",
|
|
13
|
+
collapse: "bg-transparent border-none data-[state=open]:font-semibold"
|
|
13
14
|
},
|
|
14
15
|
size: {
|
|
15
16
|
small: "heading-xxsmall-600 py-1.5 px-4 min-h-8",
|
|
16
17
|
medium: "heading-xsmall-600 py-2.5 px-4 min-h-10",
|
|
17
|
-
large: "heading-small-600 py-3 px-4 min-h-12"
|
|
18
|
+
large: "heading-small-600 py-3 px-4 min-h-12",
|
|
19
|
+
"collapse-small": "text-sm py-1.5 px-4 min-h-8",
|
|
20
|
+
"collapse-medium": "text-base py-2.5 px-4 min-h-10",
|
|
21
|
+
"collapse-large": "text-lg py-3 px-4 min-h-12"
|
|
18
22
|
},
|
|
19
23
|
iconPosition: {
|
|
20
24
|
start: "justify-start",
|
|
@@ -35,41 +39,69 @@ const AccordionTrigger = React.forwardRef(
|
|
|
35
39
|
({
|
|
36
40
|
className,
|
|
37
41
|
children,
|
|
38
|
-
variant,
|
|
42
|
+
variant = "default",
|
|
39
43
|
size,
|
|
40
44
|
disabled,
|
|
41
45
|
asChild,
|
|
42
46
|
iconPosition = "end",
|
|
47
|
+
ghost = false,
|
|
43
48
|
...props
|
|
44
|
-
}, ref) =>
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
className: cn(
|
|
59
|
-
"size-5 shrink-0 text-grey-800 transition-transform duration-200 [&[data-state=open]]:rotate-90",
|
|
60
|
-
disabled && "text-grey-300"
|
|
61
|
-
)
|
|
49
|
+
}, ref) => {
|
|
50
|
+
const finalVariant = ghost ? "collapse" : variant;
|
|
51
|
+
const allowedSizes = ["small", "medium", "large"];
|
|
52
|
+
let finalSize = size;
|
|
53
|
+
if (ghost && size && allowedSizes.includes(size) && typeof size === "string") {
|
|
54
|
+
if (size === "collapse-small" || size === "collapse-medium" || size === "collapse-large") {
|
|
55
|
+
finalSize = size;
|
|
56
|
+
} else {
|
|
57
|
+
finalSize = `collapse-${size}`;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
const renderTriggerContent = () => {
|
|
61
|
+
if (asChild) {
|
|
62
|
+
return children;
|
|
62
63
|
}
|
|
63
|
-
|
|
64
|
-
|
|
64
|
+
if (ghost && iconPosition === "start") {
|
|
65
|
+
return /* @__PURE__ */ React.createElement("div", { className: "flex flex-1 items-center justify-between gap-4 w-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 truncate" }, /* @__PURE__ */ React.createElement("span", { className: "flex items-center justify-center flex-shrink-0 min-w-4 min-h-4 transition-transform duration-300 group-data-[state=open]:rotate-90 text-grey-700 text-lg select-none font-normal" }, /* @__PURE__ */ React.createElement(ChevronRight, { className: "size-4" })), /* @__PURE__ */ React.createElement("span", { className: "font-normal" }, children)));
|
|
66
|
+
}
|
|
67
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, iconPosition === "start" && /* @__PURE__ */ React.createElement(
|
|
68
|
+
ChevronDown,
|
|
69
|
+
{
|
|
70
|
+
className: cn(
|
|
71
|
+
"size-5 shrink-0 text-grey-800 transition-transform duration-200 [&[data-state=open]]:rotate-90",
|
|
72
|
+
disabled && "text-grey-300"
|
|
73
|
+
)
|
|
74
|
+
}
|
|
75
|
+
), /* @__PURE__ */ React.createElement("span", { className: "flex-1" }, children), iconPosition === "end" && /* @__PURE__ */ React.createElement(
|
|
76
|
+
ChevronDown,
|
|
77
|
+
{
|
|
78
|
+
className: cn(
|
|
79
|
+
"size-5 shrink-0 text-grey-800 transition-transform duration-200 [&[data-state=open]]:rotate-180",
|
|
80
|
+
disabled && "text-grey-300"
|
|
81
|
+
)
|
|
82
|
+
}
|
|
83
|
+
));
|
|
84
|
+
};
|
|
85
|
+
return /* @__PURE__ */ React.createElement(AccordionPrimitive.Header, null, /* @__PURE__ */ React.createElement(
|
|
86
|
+
AccordionPrimitive.Trigger,
|
|
65
87
|
{
|
|
88
|
+
ref,
|
|
66
89
|
className: cn(
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
90
|
+
accordionVariants({
|
|
91
|
+
variant: finalVariant,
|
|
92
|
+
size: finalSize,
|
|
93
|
+
iconPosition,
|
|
94
|
+
className
|
|
95
|
+
}),
|
|
96
|
+
ghost && "group"
|
|
97
|
+
),
|
|
98
|
+
...props,
|
|
99
|
+
disabled,
|
|
100
|
+
asChild
|
|
101
|
+
},
|
|
102
|
+
renderTriggerContent()
|
|
103
|
+
));
|
|
104
|
+
}
|
|
73
105
|
);
|
|
74
106
|
const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
75
107
|
AccordionPrimitive.Content,
|
package/dist/index.d.ts
CHANGED
|
@@ -45,23 +45,24 @@ export { zodResolver } from '@hookform/resolvers/zod';
|
|
|
45
45
|
export { Translation, useTranslation } from 'react-i18next';
|
|
46
46
|
|
|
47
47
|
declare const accordionVariants: (props?: ({
|
|
48
|
-
variant?: "default" | null | undefined;
|
|
49
|
-
size?: "small" | "medium" | "large" | null | undefined;
|
|
48
|
+
variant?: "default" | "collapse" | null | undefined;
|
|
49
|
+
size?: "small" | "medium" | "large" | "collapse-small" | "collapse-medium" | "collapse-large" | null | undefined;
|
|
50
50
|
iconPosition?: "start" | "end" | null | undefined;
|
|
51
51
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
52
52
|
declare const Accordion: React$1.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React$1.RefAttributes<HTMLDivElement>>;
|
|
53
53
|
declare const AccordionItem: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
54
54
|
declare const AccordionTrigger: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
|
|
55
|
-
variant?: "default" | null | undefined;
|
|
56
|
-
size?: "small" | "medium" | "large" | null | undefined;
|
|
55
|
+
variant?: "default" | "collapse" | null | undefined;
|
|
56
|
+
size?: "small" | "medium" | "large" | "collapse-small" | "collapse-medium" | "collapse-large" | null | undefined;
|
|
57
57
|
iconPosition?: "start" | "end" | null | undefined;
|
|
58
58
|
} & class_variance_authority_types.ClassProp) | undefined) => string> & {
|
|
59
59
|
children?: React$1.ReactNode;
|
|
60
|
+
ghost?: boolean;
|
|
60
61
|
} & React$1.RefAttributes<HTMLButtonElement>>;
|
|
61
62
|
declare const AccordionContent: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
62
63
|
|
|
63
64
|
declare const buttonVariants: (props?: ({
|
|
64
|
-
variant?: "
|
|
65
|
+
variant?: "ghost" | "filled" | "outlined" | "tonal" | null | undefined;
|
|
65
66
|
size?: "small" | "medium" | "large" | "extraLarge" | null | undefined;
|
|
66
67
|
color?: "blue" | "grey" | "destructive" | null | undefined;
|
|
67
68
|
iconButton?: boolean | null | undefined;
|
|
@@ -890,7 +891,7 @@ declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimi
|
|
|
890
891
|
declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
891
892
|
|
|
892
893
|
declare const ResizablePanelGroup: ({ className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => React$1.JSX.Element;
|
|
893
|
-
declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLButtonElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement |
|
|
894
|
+
declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLButtonElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLLabelElement | HTMLParagraphElement | HTMLInputElement | HTMLHeadingElement | HTMLUListElement | HTMLObjectElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLegendElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement>, "id" | "onResize"> & {
|
|
894
895
|
className?: string;
|
|
895
896
|
collapsedSize?: number | undefined;
|
|
896
897
|
collapsible?: boolean | undefined;
|