etudes 7.2.0 → 7.3.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/components/Burger.d.ts +25 -0
- package/components/Burger.js +100 -0
- package/components/BurgerButton.d.ts +9 -6
- package/components/BurgerButton.js +9 -76
- package/components/Video.d.ts +2 -2
- package/package.json +15 -17
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { type HTMLAttributes } from 'react';
|
|
2
|
+
export type BurgerProps = HTMLAttributes<HTMLDivElement> & {
|
|
3
|
+
isActive?: boolean;
|
|
4
|
+
isSplit?: boolean;
|
|
5
|
+
isTailHidden?: boolean;
|
|
6
|
+
numberOfBars?: 2 | 3;
|
|
7
|
+
onActivate?: () => void;
|
|
8
|
+
onDeactivate?: () => void;
|
|
9
|
+
onToggle?: (isActive: boolean) => void;
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* Three-striped burger component that transforms into an "X" when active.
|
|
13
|
+
*
|
|
14
|
+
* @exports BurgerBar Component for each bar in the burger.
|
|
15
|
+
*/
|
|
16
|
+
export declare const Burger: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
|
|
17
|
+
isActive?: boolean;
|
|
18
|
+
isSplit?: boolean;
|
|
19
|
+
isTailHidden?: boolean;
|
|
20
|
+
numberOfBars?: 2 | 3;
|
|
21
|
+
onActivate?: () => void;
|
|
22
|
+
onDeactivate?: () => void;
|
|
23
|
+
onToggle?: (isActive: boolean) => void;
|
|
24
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
25
|
+
export declare const BurgerBar: ({ ...props }: HTMLAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { forwardRef } from 'react';
|
|
4
|
+
import { Repeat } from '../operators/Repeat.js';
|
|
5
|
+
import { asClassNameDict, asComponentDict, asStyleDict, cloneStyledElement, styles } from '../utils/index.js';
|
|
6
|
+
/**
|
|
7
|
+
* Three-striped burger component that transforms into an "X" when active.
|
|
8
|
+
*
|
|
9
|
+
* @exports BurgerBar Component for each bar in the burger.
|
|
10
|
+
*/
|
|
11
|
+
export const Burger = forwardRef(({ children, className, isActive = false, isTailHidden = false, isSplit = false, numberOfBars = 3, ...props }, ref) => {
|
|
12
|
+
const components = asComponentDict(children, {
|
|
13
|
+
bar: BurgerBar,
|
|
14
|
+
});
|
|
15
|
+
const fixedClassNames = asClassNameDict({
|
|
16
|
+
root: clsx({
|
|
17
|
+
active: isActive,
|
|
18
|
+
}),
|
|
19
|
+
bar: clsx({
|
|
20
|
+
active: isActive,
|
|
21
|
+
}),
|
|
22
|
+
});
|
|
23
|
+
const fixedStyles = getFixedStyles({ isSplit, isActive, isTailHidden });
|
|
24
|
+
return (_jsx("div", { ...props, ref: ref, className: clsx(className, fixedClassNames.root), children: _jsx(Repeat, { count: isSplit ? 2 : 1, children: j => (_jsx("div", { "aria-hidden": true, style: styles(fixedStyles.section, fixedStyles[`section${j}`]), children: _jsx(Repeat, { count: numberOfBars, children: i => cloneStyledElement(components.bar ?? _jsx(BurgerBar, {}), {
|
|
25
|
+
'aria-hidden': true,
|
|
26
|
+
'className': clsx(fixedClassNames.bar),
|
|
27
|
+
'style': (() => {
|
|
28
|
+
switch (numberOfBars) {
|
|
29
|
+
case 2:
|
|
30
|
+
return styles(fixedStyles.bar, fixedStyles[`bar${j}${i === 0 ? 0 : 2}`]);
|
|
31
|
+
case 3:
|
|
32
|
+
default:
|
|
33
|
+
return styles(fixedStyles.bar, fixedStyles[`bar${j}${i}`]);
|
|
34
|
+
}
|
|
35
|
+
})(),
|
|
36
|
+
}) }) })) }) }));
|
|
37
|
+
});
|
|
38
|
+
export const BurgerBar = ({ ...props }) => (_jsx("span", { ...props }));
|
|
39
|
+
function getFixedStyles({ isActive = false, isSplit = false, isTailHidden = false }) {
|
|
40
|
+
return asStyleDict({
|
|
41
|
+
section: {
|
|
42
|
+
height: '100%',
|
|
43
|
+
position: 'absolute',
|
|
44
|
+
width: isSplit ? '50%' : '100%',
|
|
45
|
+
},
|
|
46
|
+
section0: {
|
|
47
|
+
left: '0',
|
|
48
|
+
top: '0',
|
|
49
|
+
},
|
|
50
|
+
section1: {
|
|
51
|
+
right: '0',
|
|
52
|
+
top: '0',
|
|
53
|
+
},
|
|
54
|
+
bar: {
|
|
55
|
+
margin: '0',
|
|
56
|
+
padding: '0',
|
|
57
|
+
position: 'absolute',
|
|
58
|
+
width: '100%',
|
|
59
|
+
},
|
|
60
|
+
bar00: {
|
|
61
|
+
left: '0',
|
|
62
|
+
top: isActive ? '50%' : '0',
|
|
63
|
+
transform: isActive ? 'translate(0, -50%) rotate(45deg)' : 'translate(0, 0) rotate(0deg)',
|
|
64
|
+
transformOrigin: isSplit ? 'right center' : 'center',
|
|
65
|
+
},
|
|
66
|
+
bar01: {
|
|
67
|
+
left: '0',
|
|
68
|
+
top: '50%',
|
|
69
|
+
transform: isActive ? 'translate(0, -50%) scale(0)' : 'translate(0, -50%) scale(1)',
|
|
70
|
+
transformOrigin: isSplit ? 'right center' : 'center',
|
|
71
|
+
},
|
|
72
|
+
bar02: {
|
|
73
|
+
left: '0',
|
|
74
|
+
top: isActive ? '50%' : '100%',
|
|
75
|
+
transform: isActive ? 'translate(0, -50%) rotate(-45deg)' : 'translate(0, -100%) rotate(0deg)',
|
|
76
|
+
transformOrigin: isSplit ? 'right center' : 'center',
|
|
77
|
+
width: isActive || isSplit ? '100%' : `${isTailHidden ? '50%' : '100%'}`,
|
|
78
|
+
},
|
|
79
|
+
bar10: {
|
|
80
|
+
left: '0',
|
|
81
|
+
top: isActive ? '50%' : '0',
|
|
82
|
+
transform: isActive ? 'translate(0, -50%) rotate(-45deg)' : 'translate(0, 0) rotate(0deg)',
|
|
83
|
+
transformOrigin: 'left center',
|
|
84
|
+
},
|
|
85
|
+
bar11: {
|
|
86
|
+
left: '0',
|
|
87
|
+
top: '50%',
|
|
88
|
+
transform: isActive ? 'translate(0, -50%) scale(0)' : 'translate(0, -50%) scale(1)',
|
|
89
|
+
transformOrigin: 'left center',
|
|
90
|
+
},
|
|
91
|
+
bar12: {
|
|
92
|
+
left: '0',
|
|
93
|
+
top: isActive ? '50%' : '100%',
|
|
94
|
+
transform: isActive ? 'translate(0, -50%) rotate(45deg)' : 'translate(0, -100%) rotate(0deg)',
|
|
95
|
+
transformOrigin: 'left center',
|
|
96
|
+
width: isTailHidden && !isActive ? '0' : '100%',
|
|
97
|
+
},
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
Object.defineProperty(Burger, 'displayName', { value: 'Burger', writable: false });
|
|
@@ -1,22 +1,25 @@
|
|
|
1
1
|
import { type HTMLAttributes } from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
isSplit?: boolean;
|
|
5
|
-
isTailHidden?: boolean;
|
|
2
|
+
import { type BurgerProps } from './Burger.js';
|
|
3
|
+
export type BurgerButtonProps = Omit<HTMLAttributes<HTMLButtonElement> & BurgerProps, 'onToggle'> & {
|
|
6
4
|
onActivate?: () => void;
|
|
7
5
|
onDeactivate?: () => void;
|
|
8
6
|
onToggle?: (isActive: boolean) => void;
|
|
9
7
|
};
|
|
10
8
|
/**
|
|
11
9
|
* Three-striped burger button component that transforms into an "X" when
|
|
12
|
-
*
|
|
10
|
+
* active.
|
|
13
11
|
*
|
|
14
12
|
* @exports BurgerButtonBar Component for each bar in the burger button.
|
|
15
13
|
*/
|
|
16
|
-
export declare const BurgerButton: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & {
|
|
14
|
+
export declare const BurgerButton: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLButtonElement> & HTMLAttributes<HTMLDivElement> & {
|
|
17
15
|
isActive?: boolean;
|
|
18
16
|
isSplit?: boolean;
|
|
19
17
|
isTailHidden?: boolean;
|
|
18
|
+
numberOfBars?: 2 | 3;
|
|
19
|
+
onActivate?: () => void;
|
|
20
|
+
onDeactivate?: () => void;
|
|
21
|
+
onToggle?: (isActive: boolean) => void;
|
|
22
|
+
}, "onToggle"> & {
|
|
20
23
|
onActivate?: () => void;
|
|
21
24
|
onDeactivate?: () => void;
|
|
22
25
|
onToggle?: (isActive: boolean) => void;
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
4
|
+
import { asClassNameDict, asStyleDict, styles } from '../utils/index.js';
|
|
5
|
+
import { Burger, BurgerBar } from './Burger.js';
|
|
6
6
|
/**
|
|
7
7
|
* Three-striped burger button component that transforms into an "X" when
|
|
8
|
-
*
|
|
8
|
+
* active.
|
|
9
9
|
*
|
|
10
10
|
* @exports BurgerButtonBar Component for each bar in the burger button.
|
|
11
11
|
*/
|
|
12
|
-
export const BurgerButton = forwardRef(({ children, className, style, isActive = false, isTailHidden = false, isSplit = false, onActivate, onDeactivate, onToggle, ...props }, ref) => {
|
|
12
|
+
export const BurgerButton = forwardRef(({ children, className, style, isActive = false, isTailHidden = false, isSplit = false, numberOfBars = 3, onActivate, onDeactivate, onToggle, ...props }, ref) => {
|
|
13
13
|
const onClick = () => {
|
|
14
|
-
onToggle?.(isActive);
|
|
14
|
+
onToggle?.(!isActive);
|
|
15
15
|
if (isActive) {
|
|
16
16
|
onDeactivate?.();
|
|
17
17
|
}
|
|
@@ -19,26 +19,16 @@ export const BurgerButton = forwardRef(({ children, className, style, isActive =
|
|
|
19
19
|
onActivate?.();
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
|
-
const components = asComponentDict(children, {
|
|
23
|
-
bar: BurgerButtonBar,
|
|
24
|
-
});
|
|
25
22
|
const fixedClassNames = asClassNameDict({
|
|
26
23
|
root: clsx({
|
|
27
24
|
active: isActive,
|
|
28
25
|
}),
|
|
29
|
-
bar: clsx({
|
|
30
|
-
active: isActive,
|
|
31
|
-
}),
|
|
32
26
|
});
|
|
33
|
-
const fixedStyles = getFixedStyles(
|
|
34
|
-
return (_jsx("button", { ...props, ref: ref, "aria-expanded": isActive, className: clsx(className, fixedClassNames.root), style: styles(style, fixedStyles.root), onClick: onClick, children: _jsx(
|
|
35
|
-
'aria-hidden': true,
|
|
36
|
-
'className': clsx(fixedClassNames.bar),
|
|
37
|
-
'style': styles(fixedStyles.bar, fixedStyles[`bar${j}${i}`]),
|
|
38
|
-
}) }) })) }) }));
|
|
27
|
+
const fixedStyles = getFixedStyles();
|
|
28
|
+
return (_jsx("button", { ...props, ref: ref, "aria-expanded": isActive, className: clsx(className, fixedClassNames.root), style: styles(style, fixedStyles.root), onClick: onClick, children: _jsx(Burger, { isActive: isActive, isSplit: isSplit, isTailHidden: isTailHidden, numberOfBars: numberOfBars, children: children }) }));
|
|
39
29
|
});
|
|
40
|
-
export const BurgerButtonBar =
|
|
41
|
-
function getFixedStyles(
|
|
30
|
+
export const BurgerButtonBar = BurgerBar;
|
|
31
|
+
function getFixedStyles() {
|
|
42
32
|
return asStyleDict({
|
|
43
33
|
root: {
|
|
44
34
|
background: 'transparent',
|
|
@@ -46,63 +36,6 @@ function getFixedStyles({ isActive = false, isSplit = false, isTailHidden = fals
|
|
|
46
36
|
display: 'block',
|
|
47
37
|
outline: 'none',
|
|
48
38
|
},
|
|
49
|
-
section: {
|
|
50
|
-
height: '100%',
|
|
51
|
-
position: 'absolute',
|
|
52
|
-
width: isSplit ? '50%' : '100%',
|
|
53
|
-
},
|
|
54
|
-
section0: {
|
|
55
|
-
left: '0',
|
|
56
|
-
top: '0',
|
|
57
|
-
},
|
|
58
|
-
section1: {
|
|
59
|
-
right: '0',
|
|
60
|
-
top: '0',
|
|
61
|
-
},
|
|
62
|
-
bar: {
|
|
63
|
-
margin: '0',
|
|
64
|
-
padding: '0',
|
|
65
|
-
position: 'absolute',
|
|
66
|
-
width: '100%',
|
|
67
|
-
},
|
|
68
|
-
bar00: {
|
|
69
|
-
left: '0',
|
|
70
|
-
top: isActive ? '50%' : '0',
|
|
71
|
-
transform: isActive ? 'translate(0, -50%) rotate(45deg)' : 'translate(0, 0) rotate(0deg)',
|
|
72
|
-
transformOrigin: isSplit ? 'right center' : 'center',
|
|
73
|
-
},
|
|
74
|
-
bar01: {
|
|
75
|
-
left: '0',
|
|
76
|
-
top: '50%',
|
|
77
|
-
transform: isActive ? 'translate(0, -50%) scale(0)' : 'translate(0, -50%) scale(1)',
|
|
78
|
-
transformOrigin: isSplit ? 'right center' : 'center',
|
|
79
|
-
},
|
|
80
|
-
bar02: {
|
|
81
|
-
left: '0',
|
|
82
|
-
top: isActive ? '50%' : '100%',
|
|
83
|
-
transform: isActive ? 'translate(0, -50%) rotate(-45deg)' : 'translate(0, -100%) rotate(0deg)',
|
|
84
|
-
transformOrigin: isSplit ? 'right center' : 'center',
|
|
85
|
-
width: isActive || isSplit ? '100%' : `${isTailHidden ? '50%' : '100%'}`,
|
|
86
|
-
},
|
|
87
|
-
bar10: {
|
|
88
|
-
left: '0',
|
|
89
|
-
top: isActive ? '50%' : '0',
|
|
90
|
-
transform: isActive ? 'translate(0, -50%) rotate(-45deg)' : 'translate(0, 0) rotate(0deg)',
|
|
91
|
-
transformOrigin: 'left center',
|
|
92
|
-
},
|
|
93
|
-
bar11: {
|
|
94
|
-
left: '0',
|
|
95
|
-
top: '50%',
|
|
96
|
-
transform: isActive ? 'translate(0, -50%) scale(0)' : 'translate(0, -50%) scale(1)',
|
|
97
|
-
transformOrigin: 'left center',
|
|
98
|
-
},
|
|
99
|
-
bar12: {
|
|
100
|
-
left: '0',
|
|
101
|
-
top: isActive ? '50%' : '100%',
|
|
102
|
-
transform: isActive ? 'translate(0, -50%) rotate(45deg)' : 'translate(0, -100%) rotate(0deg)',
|
|
103
|
-
transformOrigin: 'left center',
|
|
104
|
-
width: isTailHidden && !isActive ? '0' : '100%',
|
|
105
|
-
},
|
|
106
39
|
});
|
|
107
40
|
}
|
|
108
41
|
Object.defineProperty(BurgerButton, 'displayName', { value: 'BurgerButton', writable: false });
|
package/components/Video.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type HTMLAttributes } from 'react';
|
|
2
2
|
import { type Size } from 'spase';
|
|
3
|
-
export type VideoProps = Omit<HTMLAttributes<HTMLVideoElement>, 'autoPlay' | 'controls' | 'loop' | 'muted' | 'playsInline' | 'poster' | 'onCanPlay' | 'onEnded' | 'onPause' | 'onPlay'> & {
|
|
3
|
+
export type VideoProps = Omit<HTMLAttributes<HTMLVideoElement>, 'autoPlay' | 'controls' | 'loop' | 'muted' | 'playsInline' | 'poster' | 'onCanPlay' | 'onEnded' | 'onPause' | 'onPlay' | 'onTimeUpdate'> & {
|
|
4
4
|
autoLoop?: boolean;
|
|
5
5
|
autoPlay?: boolean;
|
|
6
6
|
hasControls?: boolean;
|
|
@@ -19,7 +19,7 @@ export type VideoProps = Omit<HTMLAttributes<HTMLVideoElement>, 'autoPlay' | 'co
|
|
|
19
19
|
onSizeChange?: (size?: Size) => void;
|
|
20
20
|
onTimeUpdate?: (currentTime: number, duration: number) => void;
|
|
21
21
|
};
|
|
22
|
-
export declare const Video: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLVideoElement>, "onCanPlay" | "onEnded" | "onPause" | "onPlay" | "autoPlay" | "controls" | "loop" | "muted" | "playsInline" | "poster"> & {
|
|
22
|
+
export declare const Video: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLVideoElement>, "onCanPlay" | "onEnded" | "onPause" | "onPlay" | "onTimeUpdate" | "autoPlay" | "controls" | "loop" | "muted" | "playsInline" | "poster"> & {
|
|
23
23
|
autoLoop?: boolean;
|
|
24
24
|
autoPlay?: boolean;
|
|
25
25
|
hasControls?: boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "etudes",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.3.0",
|
|
4
4
|
"description": "A study of headless React components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"scripts": {
|
|
@@ -36,31 +36,30 @@
|
|
|
36
36
|
],
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@commitlint/config-conventional": "^19.6.0",
|
|
39
|
-
"@eslint/js": "^9.
|
|
39
|
+
"@eslint/js": "^9.19.0",
|
|
40
40
|
"@semantic-release/changelog": "^6.0.3",
|
|
41
41
|
"@semantic-release/git": "^10.0.1",
|
|
42
|
-
"@stylistic/eslint-plugin": "^
|
|
43
|
-
"@types/node": "^22.10.
|
|
44
|
-
"@types/react": "^19.0.
|
|
45
|
-
"@types/react-dom": "^19.0.
|
|
42
|
+
"@stylistic/eslint-plugin": "^3.0.0",
|
|
43
|
+
"@types/node": "^22.10.10",
|
|
44
|
+
"@types/react": "^19.0.8",
|
|
45
|
+
"@types/react-dom": "^19.0.3",
|
|
46
46
|
"@vitejs/plugin-react": "^4.3.4",
|
|
47
|
-
"@vitest/coverage-v8": "^
|
|
47
|
+
"@vitest/coverage-v8": "^3.0.4",
|
|
48
48
|
"autoprefixer": "^10.4.20",
|
|
49
49
|
"concurrently": "^9.1.2",
|
|
50
|
-
"eslint": "^9.
|
|
51
|
-
"
|
|
52
|
-
"postcss": "^8.4.49",
|
|
50
|
+
"eslint": "^9.19.0",
|
|
51
|
+
"postcss": "^8.5.1",
|
|
53
52
|
"react": "^19.0.0",
|
|
54
53
|
"react-dom": "^19.0.0",
|
|
55
|
-
"react-router": "^7.1.
|
|
54
|
+
"react-router": "^7.1.3",
|
|
56
55
|
"rimraf": "^6.0.1",
|
|
57
56
|
"semantic-release": "^24.2.1",
|
|
58
57
|
"tailwindcss": "^3.4.17",
|
|
59
58
|
"tailwindcss-safe-area": "^0.6.0",
|
|
60
59
|
"typescript": "^5.7.3",
|
|
61
|
-
"typescript-eslint": "^8.
|
|
62
|
-
"vite": "^6.0.
|
|
63
|
-
"vitest": "^
|
|
60
|
+
"typescript-eslint": "^8.21.0",
|
|
61
|
+
"vite": "^6.0.11",
|
|
62
|
+
"vitest": "^3.0.4",
|
|
64
63
|
"wait-on": "^8.0.2"
|
|
65
64
|
},
|
|
66
65
|
"dependencies": {
|
|
@@ -75,7 +74,6 @@
|
|
|
75
74
|
"react": "^19.0.0"
|
|
76
75
|
},
|
|
77
76
|
"optionalDependencies": {
|
|
78
|
-
"react-router": "^7.1.
|
|
79
|
-
}
|
|
80
|
-
"packageManager": "pnpm@9.15.3"
|
|
77
|
+
"react-router": "^7.1.3"
|
|
78
|
+
}
|
|
81
79
|
}
|