@coldsurf/ocean-road 1.16.1-alpha.2 → 1.16.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.
- package/dist/index.d.ts +99 -99
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +18 -18
- package/dist/index.js.map +1 -1
- package/dist/native.cjs +1 -1
- package/dist/native.cjs.map +1 -1
- package/dist/native.d.cts +19 -19
- package/dist/native.d.cts.map +1 -1
- package/dist/native.d.ts +18 -18
- package/dist/native.d.ts.map +1 -1
- package/dist/native.js +1 -1
- package/dist/native.js.map +1 -1
- package/dist/next.cjs +101 -101
- package/dist/next.cjs.map +1 -1
- package/dist/next.d.cts +6 -6
- package/dist/next.d.ts +4 -4
- package/dist/next.js +55 -55
- package/dist/next.js.map +1 -1
- package/package.json +24 -17
- package/src/extensions/ticket-item/ticket-item.tsx +58 -46
- package/tokens/css/color/variables-dark.css +2 -2
- package/tokens/css/color/variables-light.css +1 -1
- package/tokens/css/color/variables.css +1 -1
- package/tokens/css/typography/variables.css +1 -1
- package/tokens/js/color/variables-theme.d.ts +1 -1
- package/tokens/js/color/variables-theme.js +3 -3
- package/tokens/js/color/variables.d.ts +1 -1
- package/tokens/js/color/variables.js +1 -1
- package/tokens/js/semantic/theme-variables.d.ts +1 -1
- package/tokens/js/semantic/theme-variables.js +1 -1
- package/tokens/js/semantic/theme-variables.mjs +1 -1
- package/tokens/js/semantic/theme-variables.ts +1 -1
- package/tokens/json/color/variables-dark.json +1 -1
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"email": "imcoldsurf@gmail.com",
|
|
6
6
|
"url": "https://coldsurf.io"
|
|
7
7
|
},
|
|
8
|
-
"version": "1.16.
|
|
8
|
+
"version": "1.16.2",
|
|
9
9
|
"bugs": {
|
|
10
10
|
"url": "https://github.com/coldsurfers/ocean-road/issues"
|
|
11
11
|
},
|
|
@@ -33,21 +33,14 @@
|
|
|
33
33
|
"type": "module",
|
|
34
34
|
"module": "dist/index.js",
|
|
35
35
|
"types": "dist/index.d.ts",
|
|
36
|
-
"files": [
|
|
37
|
-
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
|
|
44
|
-
"lint:fix": "biome lint --write .",
|
|
45
|
-
"format": "biome format .",
|
|
46
|
-
"format:fix": "biome format --write .",
|
|
47
|
-
"check": "biome check .",
|
|
48
|
-
"check:fix": "biome check --write .",
|
|
49
|
-
"check:type": "tsc --noEmit"
|
|
50
|
-
},
|
|
36
|
+
"files": [
|
|
37
|
+
"src",
|
|
38
|
+
"next",
|
|
39
|
+
"native",
|
|
40
|
+
"dist",
|
|
41
|
+
"package.json",
|
|
42
|
+
"tokens"
|
|
43
|
+
],
|
|
51
44
|
"dependencies": {
|
|
52
45
|
"@coldsurf/shared-utils": "1.1.16",
|
|
53
46
|
"ts-pattern": "5.8.0"
|
|
@@ -114,5 +107,19 @@
|
|
|
114
107
|
"publishConfig": {
|
|
115
108
|
"registry": "https://registry.npmjs.org/",
|
|
116
109
|
"access": "public"
|
|
110
|
+
},
|
|
111
|
+
"scripts": {
|
|
112
|
+
"prebuild": "turbo run --filter=@coldsurfers/ocean-road-design-tokens build",
|
|
113
|
+
"build": "pnpm build:core",
|
|
114
|
+
"build:core": "tsdown",
|
|
115
|
+
"size": "node scripts/size-report.mjs",
|
|
116
|
+
"bench": "node scripts/benchmark.mjs",
|
|
117
|
+
"lint": "biome lint .",
|
|
118
|
+
"lint:fix": "biome lint --write .",
|
|
119
|
+
"format": "biome format .",
|
|
120
|
+
"format:fix": "biome format --write .",
|
|
121
|
+
"check": "biome check .",
|
|
122
|
+
"check:fix": "biome check --write .",
|
|
123
|
+
"check:type": "tsc --noEmit"
|
|
117
124
|
}
|
|
118
|
-
}
|
|
125
|
+
}
|
|
@@ -6,16 +6,39 @@ import media from '@/utils/media';
|
|
|
6
6
|
import { dateUtils } from '@coldsurf/shared-utils';
|
|
7
7
|
import { css } from '@emotion/react';
|
|
8
8
|
import styled from '@emotion/styled';
|
|
9
|
-
import type
|
|
10
|
-
|
|
11
|
-
const
|
|
9
|
+
import { type ReactNode, useId } from 'react';
|
|
10
|
+
|
|
11
|
+
const ClipPathSvg = ({ id }: { id: string }) => (
|
|
12
|
+
<svg width="0" height="0" style={{ position: 'absolute' }} aria-hidden="true" focusable="false">
|
|
13
|
+
<defs>
|
|
14
|
+
<clipPath id={id} clipPathUnits="objectBoundingBox">
|
|
15
|
+
<path d="M0.4666666666666667 4.0797391304347825e-8C0.4666666666666667 0.01920994202898551 0.4822405797101449 0.034782608695652174 0.5014492753623189 0.034782608695652174C0.5206579710144927 0.034782608695652174 0.5362318840579711 0.01920994202898551 0.5362318840579711 4.6878840579710144e-8L0.9710144927536232 2.1097420289855072e-7C0.9870231884057972 2.1381420289855074e-7 1 0.012977449275362318 1 0.028985797101449273L1 0.9710144927536232C1 0.9870231884057972 0.9870231884057972 1 0.9710144927536232 1L0.5362318840579711 1C0.5362318840579711 0.980791304347826 0.5206579710144927 0.9652173913043478 0.5014492753623189 0.9652173913043478C0.4822405797101449 0.9652173913043478 0.4666666666666667 0.980791304347826 0.4666666666666667 1L0.028985507246376812 1C0.012977304347826088 1 4.1434202898550726e-8 0.9870231884057972 4.212376811594203e-8 0.9710144927536232L8.592260869565217e-8 0.028985507246376812C8.732231884057972e-8 0.012977304347826088 0.012977333333333332 3.9834202898550725e-8 0.028985507246376812 4.123391304347826e-8L0.4666666666666667 4.0797391304347825e-8Z" />
|
|
16
|
+
</clipPath>
|
|
17
|
+
</defs>
|
|
18
|
+
</svg>
|
|
19
|
+
);
|
|
20
|
+
|
|
21
|
+
const Container = styled.div<{ $clipPathId: string }>`
|
|
12
22
|
position: relative;
|
|
13
|
-
|
|
23
|
+
display: flex;
|
|
24
|
+
align-items: center;
|
|
25
|
+
justify-content: center;
|
|
26
|
+
clip-path: ${(props) => `url(#${props.$clipPathId})`};
|
|
27
|
+
`;
|
|
28
|
+
|
|
29
|
+
const ContainerAbsolute = styled.div`
|
|
30
|
+
position: absolute;
|
|
31
|
+
top: 0;
|
|
32
|
+
left: 0;
|
|
33
|
+
bottom: 0;
|
|
34
|
+
right: 0;
|
|
35
|
+
background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
|
|
36
|
+
z-index: 1;
|
|
14
37
|
`;
|
|
15
38
|
|
|
16
39
|
const DefaultConcertThumbnail = styled.img`
|
|
17
40
|
width: 248px;
|
|
18
|
-
|
|
41
|
+
aspect-ratio: 1 / 1;
|
|
19
42
|
border-radius: 12px;
|
|
20
43
|
object-fit: cover;
|
|
21
44
|
object-position: 50%;
|
|
@@ -27,22 +50,6 @@ const DefaultConcertThumbnail = styled.img`
|
|
|
27
50
|
`)}
|
|
28
51
|
`;
|
|
29
52
|
|
|
30
|
-
const circleWidth = 36;
|
|
31
|
-
|
|
32
|
-
const ConcertThumbnailHalfCircle = styled.div<{ $inverted?: boolean }>`
|
|
33
|
-
position: absolute;
|
|
34
|
-
|
|
35
|
-
top: ${(props) => (props.$inverted ? 'unset' : `${circleWidth * 0.5}px`)};
|
|
36
|
-
bottom: ${(props) => (props.$inverted ? `-${circleWidth * 0.5}px` : 'unset')};
|
|
37
|
-
left: 50%;
|
|
38
|
-
|
|
39
|
-
transform: translate(-50%, -${circleWidth * 0.5}px);
|
|
40
|
-
width: ${circleWidth}px;
|
|
41
|
-
height: ${circleWidth * 0.5}px;
|
|
42
|
-
background-color: ${semantics.color.background[2]};
|
|
43
|
-
border-radius: ${(props) => (props.$inverted ? `${circleWidth * 0.5}px ${circleWidth * 0.5}px 0 0` : `0 0 ${circleWidth * 0.5}px ${circleWidth * 0.5}px`)};
|
|
44
|
-
`;
|
|
45
|
-
|
|
46
53
|
const TicketTypeBadge = styled.div`
|
|
47
54
|
padding: 4px;
|
|
48
55
|
border-radius: 4px;
|
|
@@ -75,6 +82,7 @@ const ConcertInfoPositionAbsolute = styled.div`
|
|
|
75
82
|
gap: 2.5px;
|
|
76
83
|
display: flex;
|
|
77
84
|
flex-direction: column;
|
|
85
|
+
z-index: 2;
|
|
78
86
|
`;
|
|
79
87
|
|
|
80
88
|
const ConcertTitle = styled(Text)`
|
|
@@ -121,31 +129,35 @@ export function TicketItem({
|
|
|
121
129
|
renderThumbnail?: (url: string) => ReactNode;
|
|
122
130
|
badgeText?: string;
|
|
123
131
|
}) {
|
|
132
|
+
const clipPathId = useId().replace(/:/g, '');
|
|
133
|
+
|
|
124
134
|
return (
|
|
125
|
-
|
|
126
|
-
{
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
<
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
<
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
135
|
+
<>
|
|
136
|
+
<ClipPathSvg id={clipPathId} />
|
|
137
|
+
<Container $clipPathId={clipPathId}>
|
|
138
|
+
{thumbnailUrl ? (
|
|
139
|
+
renderThumbnail ? (
|
|
140
|
+
renderThumbnail(thumbnailUrl)
|
|
141
|
+
) : (
|
|
142
|
+
<DefaultConcertThumbnail src={thumbnailUrl} />
|
|
143
|
+
)
|
|
144
|
+
) : null}
|
|
145
|
+
<ContainerAbsolute />
|
|
146
|
+
<ConcertInfoPositionAbsolute>
|
|
147
|
+
<ConcertTitle numberOfLines={1}>{title}</ConcertTitle>
|
|
148
|
+
<ConcertVenue numberOfLines={1}>{venueName}</ConcertVenue>
|
|
149
|
+
<ConcertDate numberOfLines={1}>
|
|
150
|
+
{dateUtils.parseEventDate(date instanceof Date ? date : new Date(date), {
|
|
151
|
+
formatStyle: 'english',
|
|
152
|
+
})}
|
|
153
|
+
</ConcertDate>
|
|
154
|
+
{badgeText && (
|
|
155
|
+
<TicketTypeBadge>
|
|
156
|
+
<TicketTypeBadgeText>{badgeText}</TicketTypeBadgeText>
|
|
157
|
+
</TicketTypeBadge>
|
|
158
|
+
)}
|
|
159
|
+
</ConcertInfoPositionAbsolute>
|
|
160
|
+
</Container>
|
|
161
|
+
</>
|
|
150
162
|
);
|
|
151
163
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on Fri,
|
|
3
|
+
* Generated on Fri, 22 May 2026 13:39:50 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
7
|
-
--color-background-1: #
|
|
7
|
+
--color-background-1: #0e0e10; /* background color 1 */
|
|
8
8
|
--color-background-2: #212529; /* background color 2 */
|
|
9
9
|
--color-background-3: #343a40; /* background color 3 */
|
|
10
10
|
--color-background-4: #495057; /* background color 3 */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on Fri,
|
|
3
|
+
* Generated on Fri, 22 May 2026 13:39:50 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
module.exports = {
|
|
@@ -8,13 +8,13 @@ module.exports = {
|
|
|
8
8
|
"background": {
|
|
9
9
|
"1": {
|
|
10
10
|
"value": "#ffffff",
|
|
11
|
-
"darkValue": "#
|
|
11
|
+
"darkValue": "#0e0e10",
|
|
12
12
|
"comment": "background color 1",
|
|
13
13
|
"filePath": "tokens/color/theme-alias.json",
|
|
14
14
|
"isSource": true,
|
|
15
15
|
"original": {
|
|
16
16
|
"value": "{oc.white}",
|
|
17
|
-
"darkValue": "
|
|
17
|
+
"darkValue": "#0e0e10",
|
|
18
18
|
"comment": "background color 1"
|
|
19
19
|
},
|
|
20
20
|
"name": "ColorBackground1",
|