Skip to content

Commit 5a1ccc1

Browse files
adenvtadenvt
authored
Merge pull request #631 from privy-open-source/feat/carousel
2 parents 5876927 + 40f4867 commit 5a1ccc1

39 files changed

+1739
-140
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@
8686
"@fontsource/dm-sans": "4.5.9",
8787
"@juggle/resize-observer": "^3.4.0",
8888
"@privyid/persona-icon": "workspace:^",
89+
"@splidejs/splide": "^4.1.4",
8990
"@testing-library/user-event": "^14.4.3",
9091
"@vueuse/core": "10.1.2",
9192
"@vueuse/math": "10.1.2",

‎packages/persona-icon/package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,10 @@
1313
"require": "./dist/module.cjs",
1414
"types": "./dist/types.d.ts"
1515
},
16-
"./vue/": "./vue/",
16+
"./vue/": {
17+
"types": "./types/vue.d.ts",
18+
"default": "./vue/"
19+
},
1720
"./font/": "./font/",
1821
"./svg/": {
1922
"types": "./types/svg.d.ts",

‎packages/persona-icon/types/vue.d.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
declare module '@privyid/persona-icon/vue/*' {
2+
import type { DefineComponent } from 'vue'
3+
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
4+
const component: DefineComponent<{}, {}, any>
5+
export default component
6+
}

‎packages/tailwind-animation/README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,12 @@ module.exports = {
3737
- `slide-up`
3838
- `slide-left`
3939
- `slide-right`
40+
- `slide-top`
41+
- `slide-bottom`
42+
- `slide-full-left`
43+
- `slide-full-right`
44+
- `slide-full-top`
45+
- `slide-full-bottom`
4046
- `zoom-in`
4147
- `zoom-out`
4248

‎packages/tailwind-animation/base.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import type { CSSRuleObject } from 'tailwindcss/types/config'
2+
3+
export default function useBase (onEnter: CSSRuleObject, onLeave?: CSSRuleObject): CSSRuleObject

‎packages/tailwind-animation/base.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module.exports = function useBase (theme, onEnter, onLeave = onEnter) {
2+
return {
3+
'&-enter-active, &-leave-active': {
4+
transitionDuration : theme('transitionDuration.150'),
5+
transitionTimingFunction: theme('transitionTimingFunction.in-out'),
6+
transitionProperty : 'opacity, transform',
7+
willChange : 'opacity, transform',
8+
},
9+
'&-enter, &-enter-from': onEnter,
10+
'&-leave-to' : onLeave,
11+
}
12+
}

‎packages/tailwind-animation/index.js

Lines changed: 104 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,114 @@
1-
const plugin = require('tailwindcss/plugin')
1+
const plugin = require('tailwindcss/plugin')
2+
const useBase = require('./base')
23

34
module.exports = plugin(
4-
function ({ addComponents }) {
5+
function ({ addComponents, theme }) {
56
addComponents({
6-
'.slide-up-enter-active, .slide-up-leave-active': {
7-
transitionDuration : '150ms',
8-
transitionProperty : 'opacity, transform',
9-
transitionTimingFunction: 'cubic-bezier(0.2, 0, 0.38, 0.9)',
10-
willChange : 'opacity, transform',
11-
},
12-
'.slide-up-enter, .slide-up-enter-from, .slide-up-leave-to': {
7+
'.fade' : useBase(theme, { opacity: 0 }),
8+
'.zoom-in': useBase(theme,
9+
{
10+
opacity : 0,
11+
transform: 'scale(0.95)',
12+
},
13+
{
14+
opacity : 0,
15+
transform: 'scale(1.05)',
16+
},
17+
),
18+
'.zoom-out': useBase(theme,
19+
{
20+
opacity : 0,
21+
transform: 'scale(1.05)',
22+
},
23+
{
24+
opacity : 0,
25+
transform: 'scale(0.95)',
26+
},
27+
),
28+
'.slide-right': useBase(theme,
29+
{
30+
opacity : 0,
31+
transform: 'translateX(-1.5rem)',
32+
},
33+
{
34+
opacity : 0,
35+
transform: 'translateX(1.5rem)',
36+
},
37+
),
38+
'.slide-left': useBase(theme,
39+
{
40+
opacity : 0,
41+
transform: 'translateX(1.5rem)',
42+
},
43+
{
44+
opacity : 0,
45+
transform: 'translateX(-1.5rem)',
46+
},
47+
),
48+
'.slide-top': useBase(theme,
49+
{
50+
opacity : 0,
51+
transform: 'translateY(1.5rem)',
52+
},
53+
{
54+
opacity : 0,
55+
transform: 'translateY(-1.5rem)',
56+
},
57+
),
58+
'.slide-bottom': useBase(theme,
59+
{
60+
opacity : 0,
61+
transform: 'translateY(-1.5rem)',
62+
},
63+
{
64+
opacity : 0,
65+
transform: 'translateY(1.5rem)',
66+
},
67+
),
68+
'.slide-up': useBase(theme, {
1369
opacity : 0,
1470
transform: 'translateY(1.5rem)',
15-
},
16-
'.fade-enter-active, .fade-leave-active': {
17-
transitionDuration : '150ms',
18-
transitionProperty : 'opacity',
19-
transitionTimingFunction: 'cubic-bezier(0.2, 0, 0.38, 0.9)',
20-
willChange : 'opacity, transform',
21-
},
22-
'.fade-enter, .fade-enter-from, .fade-leave-to': { opacity: 0 },
23-
'.zoom-in-enter-active, .zoom-out-enter-active, .zoom-in-leave-active, .zoom-out-leave-active':
24-
{
25-
transitionDuration : '150ms',
26-
transitionProperty : 'opacity, transform',
27-
transitionTimingFunction: 'cubic-bezier(0.2, 0, 0.38, 0.9)',
28-
willChange : 'opacity, transform',
29-
},
30-
'.zoom-in-enter, .zoom-in-enter-from': {
31-
opacity : 0,
32-
transform: 'scale(0.95)',
33-
},
34-
'.zoom-in-leave-to': {
35-
opacity : 0,
36-
transform: 'scale(1.05)',
37-
},
38-
'.zoom-out-enter, .zoom-out-enter-from': {
39-
opacity : 0,
40-
transform: 'scale(1.05)',
41-
},
42-
'.zoom-out-leave-to': {
43-
opacity : 0,
44-
transform: 'scale(0.95)',
45-
},
46-
'.slide-right-enter-active, .slide-left-enter-active, .slide-right-leave-active, .slide-left-leave-active':
71+
}),
72+
'.slide-full-right': useBase(theme,
4773
{
48-
transitionDuration : '150ms',
49-
transitionProperty : 'opacity, transform',
50-
transitionTimingFunction: 'cubic-bezier(0.2, 0, 0.38, 0.9)',
51-
willChange : 'opacity, transform',
74+
opacity : 0,
75+
transform: 'translateX(-100%)',
5276
},
53-
'.slide-right-enter, .slide-right-enter-from': {
54-
opacity : 0,
55-
transform: 'translateX(-1.5rem)',
56-
},
57-
'.slide-right-leave-to': {
58-
opacity : 0,
59-
transform: 'translateX(1.5rem)',
60-
},
61-
'.slide-left-enter, .slide-left-enter-from': {
62-
opacity : 0,
63-
transform: 'translateX(1.5rem)',
64-
},
65-
'.slide-left-leave-to': {
66-
opacity : 0,
67-
transform: 'translateX(-1.5rem)',
68-
},
77+
{
78+
opacity : 0,
79+
transform: 'translateX(100%)',
80+
},
81+
),
82+
'.slide-full-left': useBase(theme,
83+
{
84+
opacity : 0,
85+
transform: 'translateX(100%)',
86+
},
87+
{
88+
opacity : 0,
89+
transform: 'translateX(-100%)',
90+
},
91+
),
92+
'.slide-full-top': useBase(theme,
93+
{
94+
opacity : 0,
95+
transform: 'translateY(100%)',
96+
},
97+
{
98+
opacity : 0,
99+
transform: 'translateY(-100%)',
100+
},
101+
),
102+
'.slide-full-bottom': useBase(theme,
103+
{
104+
opacity : 0,
105+
transform: 'translateY(-100%)',
106+
},
107+
{
108+
opacity : 0,
109+
transform: 'translateY(100%)',
110+
},
111+
),
69112
})
70113
},
71114
{ safelist: [{ pattern: /^(slide|zoom|fade)/ }] },

‎packages/tailwind-animation/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@
1515
"homepage": "https://privy-open-source.github.io/design-system/",
1616
"main": "./index.js",
1717
"types": "./index.d.ts",
18+
"files": [
19+
"./base.js"
20+
],
1821
"peerDependencies": {
1922
"tailwind": ">= 3.0.0"
2023
},

‎packages/tailwind-animation/tsconfig.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717
},
1818
"include": [
1919
"index.js",
20-
"index.d.ts"
20+
"index.d.ts",
21+
"base.js",
22+
"base.d.ts"
2123
]
2224
}

‎packages/tailwind-preset/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -318,6 +318,10 @@ module.exports = {
318318
},
319319
toast: 1090,
320320
},
321+
minWidth : ({ theme }) => ({ ...theme('spacing') }),
322+
maxWidth : ({ theme }) => ({ ...theme('spacing') }),
323+
minHeight: ({ theme }) => ({ ...theme('spacing') }),
324+
maxHeight: ({ theme }) => ({ ...theme('spacing') }),
321325
},
322326
},
323327
}

0 commit comments

Comments
 (0)