@bouko/react 1.6.0 → 1.6.2

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 (11) hide show
  1. package/dist/components/animate/configs.d.ts +102 -102
  2. package/dist/components/heading.js +2 -2
  3. package/dist/components/index.d.ts +1 -0
  4. package/dist/components/index.js +1 -0
  5. package/dist/components/layout/heading.d.ts +12 -0
  6. package/dist/components/layout/heading.js +14 -0
  7. package/dist/components/layout/separator.js +1 -1
  8. package/dist/components/list/variants/bullet.js +2 -2
  9. package/dist/index.d.ts +0 -1
  10. package/dist/index.js +0 -1
  11. package/package.json +1 -1
package/dist/components/animate/configs.d.ts CHANGED
@@ -1,136 +1,136 @@
1
1
  export declare const animations: {
2
- fadeUp: {
3
- initial: {
4
- opacity: number;
5
- y: number;
6
- };
7
- animate: {
8
- opacity: number;
9
- y: number;
10
- transition: {
11
- duration: number;
2
+ readonly fadeUp: {
3
+ readonly initial: {
4
+ readonly opacity: 0;
5
+ readonly y: 30;
6
+ };
7
+ readonly animate: {
8
+ readonly opacity: 1;
9
+ readonly y: 0;
10
+ readonly transition: {
11
+ readonly duration: 0.3;
12
12
  };
13
13
  };
14
14
  };
15
- fadeInAndOut: {
16
- initial: {
17
- opacity: number;
15
+ readonly fadeInAndOut: {
16
+ readonly initial: {
17
+ readonly opacity: 0;
18
18
  };
19
- animate: {
20
- opacity: number;
19
+ readonly animate: {
20
+ readonly opacity: 1;
21
21
  };
22
- exit: {
23
- opacity: number;
22
+ readonly exit: {
23
+ readonly opacity: 0;
24
24
  };
25
25
  };
26
- fadeUpAndOut: {
27
- initial: {
28
- opacity: number;
29
- y: number;
26
+ readonly fadeUpAndOut: {
27
+ readonly initial: {
28
+ readonly opacity: 0;
29
+ readonly y: 10;
30
30
  };
31
- animate: {
32
- opacity: number;
33
- y: number;
31
+ readonly animate: {
32
+ readonly opacity: 1;
33
+ readonly y: 0;
34
34
  };
35
- exit: {
36
- opacity: number;
37
- y: number;
35
+ readonly exit: {
36
+ readonly opacity: 1;
37
+ readonly y: -10;
38
38
  };
39
39
  };
40
- fadeUpAndOutSlow: {
41
- initial: {
42
- opacity: number;
43
- y: string;
44
- };
45
- animate: {
46
- opacity: number;
47
- y: number;
48
- transition: {
49
- duration: number;
50
- ease: string;
40
+ readonly fadeUpAndOutSlow: {
41
+ readonly initial: {
42
+ readonly opacity: 0;
43
+ readonly y: "-100%";
44
+ };
45
+ readonly animate: {
46
+ readonly opacity: 1;
47
+ readonly y: 0;
48
+ readonly transition: {
49
+ readonly duration: 0.2;
50
+ readonly ease: "easeInOut";
51
51
  };
52
52
  };
53
- exit: {
54
- opacity: number;
55
- y: string;
53
+ readonly exit: {
54
+ readonly opacity: 0;
55
+ readonly y: "100%";
56
56
  };
57
57
  };
58
- fadeLeft: {
59
- initial: {
60
- x: number;
61
- opacity: number;
58
+ readonly fadeLeft: {
59
+ readonly initial: {
60
+ readonly x: -50;
61
+ readonly opacity: 0;
62
62
  };
63
- animate: {
64
- x: number;
65
- opacity: number;
63
+ readonly animate: {
64
+ readonly x: 0;
65
+ readonly opacity: 1;
66
66
  };
67
- exit: {
68
- x: number;
69
- opacity: number;
67
+ readonly exit: {
68
+ readonly x: 50;
69
+ readonly opacity: 0;
70
70
  };
71
- transition: {
72
- duration: number;
73
- ease: string;
71
+ readonly transition: {
72
+ readonly duration: 0.4;
73
+ readonly ease: "easeOut";
74
74
  };
75
75
  };
76
- growUpAndOut: {
77
- initial: {
78
- opacity: number;
79
- height: number;
76
+ readonly growUpAndOut: {
77
+ readonly initial: {
78
+ readonly opacity: 0;
79
+ readonly height: 0;
80
80
  };
81
- animate: {
82
- opacity: number;
83
- height: string;
81
+ readonly animate: {
82
+ readonly opacity: 1;
83
+ readonly height: "auto";
84
84
  };
85
- exit: {
86
- opacity: number;
87
- height: number;
85
+ readonly exit: {
86
+ readonly opacity: 0;
87
+ readonly height: 0;
88
88
  };
89
89
  };
90
- fadeStagger: {
91
- initial: {
92
- opacity: number;
93
- };
94
- animate: {
95
- opacity: number;
96
- transition: {
97
- staggerChildren: number;
90
+ readonly fadeStagger: {
91
+ readonly initial: {
92
+ readonly opacity: 0;
93
+ };
94
+ readonly animate: {
95
+ readonly opacity: 1;
96
+ readonly transition: {
97
+ readonly staggerChildren: 0.2;
98
98
  };
99
99
  };
100
100
  };
101
- fadeList: {
102
- hidden: {
103
- opacity: number;
104
- x: number;
105
- y: number;
106
- };
107
- visible: {
108
- opacity: number;
109
- x: number;
110
- y: number;
111
- transition: {
112
- type: string;
113
- stiffness: number;
114
- damping: number;
101
+ readonly fadeList: {
102
+ readonly hidden: {
103
+ readonly opacity: 0;
104
+ readonly x: -10;
105
+ readonly y: 5;
106
+ };
107
+ readonly visible: {
108
+ readonly opacity: 1;
109
+ readonly x: 0;
110
+ readonly y: 0;
111
+ readonly transition: {
112
+ readonly type: "spring";
113
+ readonly stiffness: 350;
114
+ readonly damping: 25;
115
115
  };
116
116
  };
117
117
  };
118
- popUp: {
119
- initial: {
120
- opacity: number;
121
- scale: number;
122
- };
123
- animate: {
124
- opacity: number;
125
- scale: number;
126
- };
127
- exit: {
128
- opacity: number;
129
- scale: number;
130
- };
131
- transition: {
132
- duration: number;
133
- ease: number[];
118
+ readonly popUp: {
119
+ readonly initial: {
120
+ readonly opacity: 0;
121
+ readonly scale: 0.9;
122
+ };
123
+ readonly animate: {
124
+ readonly opacity: 1;
125
+ readonly scale: 1;
126
+ };
127
+ readonly exit: {
128
+ readonly opacity: 0;
129
+ readonly scale: 0.9;
130
+ };
131
+ readonly transition: {
132
+ readonly duration: 0.2;
133
+ readonly ease: readonly [0.23, 1, 0.32, 1];
134
134
  };
135
135
  };
136
136
  };
package/dist/components/heading.js CHANGED
@@ -9,6 +9,6 @@ const base = {
9
9
  container: "gap-2 items-center",
10
10
  subcontainer: "flex grow flex-col",
11
11
  badge: "mb-2",
12
- title: "flex items-center gap-2 text-lg font-bold",
13
- subtitle: "font-semibold text-primary-lighter"
12
+ title: "flex items-center gap-2 font-bold",
13
+ subtitle: "text-sm font-semibold text-primary-lighter"
14
14
  };
package/dist/components/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
+ export { default as Heading, HeadingProps } from "./layout/heading";
1
2
  export { default as Separator } from "./layout/separator";
2
3
  export * from "./list";
package/dist/components/index.js CHANGED
@@ -1,2 +1,3 @@
1
+ export { default as Heading } from "./layout/heading";
1
2
  export { default as Separator } from "./layout/separator";
2
3
  export * from "./list";
package/dist/components/layout/heading.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import type { ReactNode } from "react";
2
+ export type HeadingProps = {
3
+ styles?: Record<string, string>;
4
+ container?: string;
5
+ badge?: string;
6
+ icon?: ReactNode;
7
+ title: ReactNode;
8
+ align?: "left" | "center";
9
+ subtitle?: ReactNode;
10
+ reverse?: boolean;
11
+ };
12
+ export default function Heading({ styles, container, badge, icon, title, align, subtitle, reverse }: HeadingProps): import("react/jsx-runtime").JSX.Element;
package/dist/components/layout/heading.js ADDED
@@ -0,0 +1,14 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { RowBox, ColumnBox } from "../flex";
3
+ import { cn } from "@bouko/style";
4
+ import Badge from "../badge";
5
+ export default function Heading({ styles = {}, container, badge, icon, title, align = "left", subtitle, reverse }) {
6
+ return (_jsxs(RowBox, { style: cn(base.container, styles.container, container), children: [icon, _jsxs(ColumnBox, { style: cn(base.subcontainer, align === "center" && "items-center", reverse && "flex-col-reverse"), children: [badge && _jsx(Badge, { style: base.badge, children: badge }), _jsx("span", { className: cn(base.title, styles.title), children: title }), subtitle && _jsx("span", { className: cn(base.subtitle, styles.subtitle), children: subtitle })] })] }));
7
+ }
8
+ const base = {
9
+ container: "gap-2 items-center",
10
+ subcontainer: "flex grow flex-col",
11
+ badge: "mb-2",
12
+ title: "flex items-center gap-2 text-lg font-bold",
13
+ subtitle: "font-semibold text-primary-lighter"
14
+ };
package/dist/components/layout/separator.js CHANGED
@@ -14,7 +14,7 @@ export default function Separator({ style }) {
14
14
  }
15
15
  ;
16
16
  const styles = tv({
17
- base: "bg-border-dark",
17
+ base: "shrink-0 bg-border-dark",
18
18
  variants: {
19
19
  flow: {
20
20
  row: "w-px min-w-px h-full",
package/dist/components/list/variants/bullet.js CHANGED
@@ -11,6 +11,6 @@ function Marker() {
11
11
  return (_jsx("span", { className: "mr-3 text-accent", children: "\u2022" }));
12
12
  }
13
13
  const styles = {
14
- base: "flex flex-col gap-1 w-full text-primary-dark",
15
- title: "mb-1 text-base text-primary"
14
+ base: "flex flex-col gap-1 w-full",
15
+ title: "mb-1 text-base"
16
16
  };
package/dist/index.d.ts CHANGED
@@ -4,7 +4,6 @@ export { default as Select } from "./components/select";
4
4
  export { default as MultipleChoice } from "./components/multiple-choice";
5
5
  export { default as Attachment } from "./components/attachment";
6
6
  export { default as CheckBox } from "./components/checkbox";
7
- export { default as Heading } from "./components/heading";
8
7
  export { default as Badge } from "./components/badge";
9
8
  export { default as FadeCarousel } from "./components/fade-carousel";
10
9
  export * from "./components";
package/dist/index.js CHANGED
@@ -4,7 +4,6 @@ export { default as Select } from "./components/select";
4
4
  export { default as MultipleChoice } from "./components/multiple-choice";
5
5
  export { default as Attachment } from "./components/attachment";
6
6
  export { default as CheckBox } from "./components/checkbox";
7
- export { default as Heading } from "./components/heading";
8
7
  export { default as Badge } from "./components/badge";
9
8
  export { default as FadeCarousel } from "./components/fade-carousel";
10
9
  export * from "./components";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
 
3
3
  "name": "@bouko/react",
4
- "version": "1.6.0",
4
+ "version": "1.6.2",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
7
7
  "license": "MIT",