lecom-ui 5.3.5 → 5.3.7

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.
Files changed (3) hide show
  1. package/dist/components/Accordion/Accordion.js +68 -30
  2. package/dist/index.d.ts +12 -6
  3. package/package.json +1 -1
package/dist/components/Accordion/Accordion.js CHANGED
@@ -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,75 @@ 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,
48
+ mode,
49
+ header,
50
+ extra,
43
51
  ...props
44
- }, ref) => /* @__PURE__ */ React.createElement(AccordionPrimitive.Header, null, /* @__PURE__ */ React.createElement(
45
- AccordionPrimitive.Trigger,
46
- {
47
- ref,
48
- className: cn(
49
- accordionVariants({ variant, size, iconPosition, className })
50
- ),
51
- ...props,
52
- disabled,
53
- asChild
54
- },
55
- asChild ? children : /* @__PURE__ */ React.createElement(React.Fragment, null, iconPosition === "start" && /* @__PURE__ */ React.createElement(
56
- ChevronDown,
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
- )
52
+ }, ref) => {
53
+ const isCollapseMode = mode === "collapse";
54
+ const finalVariant = isCollapseMode || ghost ? "collapse" : variant;
55
+ const finalIconPosition = isCollapseMode ? "start" : iconPosition;
56
+ const allowedSizes = ["small", "medium", "large"];
57
+ let finalSize = size;
58
+ if ((isCollapseMode || ghost) && size && allowedSizes.includes(size) && typeof size === "string") {
59
+ if (size === "collapse-small" || size === "collapse-medium" || size === "collapse-large") {
60
+ finalSize = size;
61
+ } else {
62
+ finalSize = `collapse-${size}`;
63
+ }
64
+ }
65
+ const content = isCollapseMode ? header : children;
66
+ const renderTriggerContent = () => {
67
+ if (asChild) {
68
+ return content;
62
69
  }
63
- ), /* @__PURE__ */ React.createElement("span", { className: "flex-1" }, children), iconPosition === "end" && /* @__PURE__ */ React.createElement(
64
- ChevronDown,
70
+ if (isCollapseMode || ghost && finalIconPosition === "start") {
71
+ 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" }, content)), extra && /* @__PURE__ */ React.createElement("div", { className: "text-sm text-grey-500" }, extra));
72
+ }
73
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, finalIconPosition === "start" && /* @__PURE__ */ React.createElement(
74
+ ChevronDown,
75
+ {
76
+ className: cn(
77
+ "size-5 shrink-0 text-grey-800 transition-transform duration-200 [&[data-state=open]]:rotate-90",
78
+ disabled && "text-grey-300"
79
+ )
80
+ }
81
+ ), /* @__PURE__ */ React.createElement("span", { className: "flex-1" }, content), finalIconPosition === "end" && /* @__PURE__ */ React.createElement(
82
+ ChevronDown,
83
+ {
84
+ className: cn(
85
+ "size-5 shrink-0 text-grey-800 transition-transform duration-200 [&[data-state=open]]:rotate-180",
86
+ disabled && "text-grey-300"
87
+ )
88
+ }
89
+ ));
90
+ };
91
+ return /* @__PURE__ */ React.createElement(AccordionPrimitive.Header, null, /* @__PURE__ */ React.createElement(
92
+ AccordionPrimitive.Trigger,
65
93
  {
94
+ ref,
66
95
  className: cn(
67
- "size-5 shrink-0 text-grey-800 transition-transform duration-200 [&[data-state=open]]:rotate-180",
68
- disabled && "text-grey-300"
69
- )
70
- }
71
- ))
72
- ))
96
+ accordionVariants({
97
+ variant: finalVariant,
98
+ size: finalSize,
99
+ iconPosition: finalIconPosition,
100
+ className
101
+ }),
102
+ (isCollapseMode || ghost) && "group"
103
+ ),
104
+ ...props,
105
+ disabled,
106
+ asChild
107
+ },
108
+ renderTriggerContent()
109
+ ));
110
+ }
73
111
  );
74
112
  const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React.createElement(
75
113
  AccordionPrimitive.Content,
package/dist/index.d.ts CHANGED
@@ -45,23 +45,29 @@ 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
+ interface CollapseModeProps {
55
+ mode?: 'collapse';
56
+ header?: React$1.ReactNode;
57
+ extra?: React$1.ReactNode;
58
+ }
54
59
  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;
60
+ variant?: "default" | "collapse" | null | undefined;
61
+ size?: "small" | "medium" | "large" | "collapse-small" | "collapse-medium" | "collapse-large" | null | undefined;
57
62
  iconPosition?: "start" | "end" | null | undefined;
58
- } & class_variance_authority_types.ClassProp) | undefined) => string> & {
63
+ } & class_variance_authority_types.ClassProp) | undefined) => string> & CollapseModeProps & {
59
64
  children?: React$1.ReactNode;
65
+ ghost?: boolean;
60
66
  } & React$1.RefAttributes<HTMLButtonElement>>;
61
67
  declare const AccordionContent: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
62
68
 
63
69
  declare const buttonVariants: (props?: ({
64
- variant?: "filled" | "outlined" | "tonal" | "ghost" | null | undefined;
70
+ variant?: "ghost" | "filled" | "outlined" | "tonal" | null | undefined;
65
71
  size?: "small" | "medium" | "large" | "extraLarge" | null | undefined;
66
72
  color?: "blue" | "grey" | "destructive" | null | undefined;
67
73
  iconButton?: boolean | null | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lecom-ui",
3
- "version": "5.3.5",
3
+ "version": "5.3.7",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "module": "dist/index.js",